diff --git a/package-lock.json b/package-lock.json
index b8fbf84..89e8087 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7115,9 +7115,9 @@
           "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
         },
         "dot-prop": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
-          "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==",
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz",
+          "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==",
           "requires": {
             "is-obj": "^1.0.0"
           }
@@ -10199,8 +10199,7 @@
         },
         "dot-prop": {
           "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
-          "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==",
+          "resolved": "",
           "requires": {
             "is-obj": "^1.0.0"
           }
@@ -15593,6 +15592,11 @@
       "resolved": "https://registry.npmjs.org/lodash.some/-/lodash.some-4.6.0.tgz",
       "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0="
     },
+    "lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
+    },
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -25149,9 +25153,9 @@
           "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
         },
         "dot-prop": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
-          "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==",
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz",
+          "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==",
           "requires": {
             "is-obj": "^1.0.0"
           }
diff --git a/package.json b/package.json
index 23ddef1..51fe1d4 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "github-calendar": "^2.2.1",
     "lodash.get": "^4.4.2",
     "lodash.groupby": "^4.6.0",
+    "lodash.sortby": "^4.7.0",
     "netlify-cms-app": "^2.12.19",
     "prism-react-renderer": "^1.1.1",
     "prop-types": "^15.7.2",
diff --git a/src/components/blogs/BlogEntry.tsx b/src/components/blogs/BlogEntry.tsx
index 57e0602..77f2b3f 100644
--- a/src/components/blogs/BlogEntry.tsx
+++ b/src/components/blogs/BlogEntry.tsx
@@ -6,6 +6,7 @@ import { Button } from '~/components/ui/controls/Button';
 import { Card } from '~/components/ui/containers/Card';
 import React from 'react';
 import { Link } from 'gatsby';
+import sort from 'lodash.sortby';
 import { ColorBadge } from '~/components/ui/misc/ColorBadge';
 import { Groups } from '~/components/ui/groups/Groups';
 
@@ -30,7 +31,7 @@ export function BlogEntry({ blog }: { blog: Blog }) {
 					</time>
 				</header>
 				<Groups size={2} className={`mb-4 mt-2`}>
-					{blog.tags.map((tag) => (
+					{sort(blog.tags).map((tag) => (
 						<Link to={`/tags/${tag.toLowerCase()}`} key={tag}>
 							<ColorBadge text={tag} />
 						</Link>
diff --git a/src/components/projects/ProjectMain.tsx b/src/components/projects/ProjectMain.tsx
index 7c6f9af..54668a8 100644
--- a/src/components/projects/ProjectMain.tsx
+++ b/src/components/projects/ProjectMain.tsx
@@ -8,6 +8,7 @@ import userProfile from '~/profile';
 import { Groups } from '~/components/ui/groups/Groups';
 import { Icon } from '~/components/ui/icons/Icon';
 import { ColorBadge } from '~/components/ui/misc/ColorBadge';
+import sort from 'lodash.sortby';
 
 export function ProjectMain({
 	projects,
@@ -53,7 +54,7 @@ export function ProjectMain({
 								</div>
 								<p tw={'flex-grow'}>{project.description}</p>
 								<Groups size={2} className={`mt-3`}>
-									{project.tags.map((tag) => (
+									{sort(project.tags).map((tag) => (
 										<ColorBadge key={tag} text={tag} className={'mb-2'} />
 									))}
 								</Groups>
diff --git a/src/templates/BlogTemplate.tsx b/src/templates/BlogTemplate.tsx
index 8cf6ce8..0f7724a 100644
--- a/src/templates/BlogTemplate.tsx
+++ b/src/templates/BlogTemplate.tsx
@@ -15,6 +15,7 @@ import { Groups } from '~/components/ui/groups/Groups';
 import { SEO } from '~/components/common/SEO';
 import { DisqusComments } from '~/components/blogs/DisqusComments';
 import { flattenBlogNode } from '~/types/blog';
+import sort from 'lodash.sortby';
 
 export const query = graphql`
 	query($slug: String!) {
@@ -78,7 +79,7 @@ const BlogTemplate = ({ data: { mdx: node } }) => {
 						</time>
 					</header>
 					<Groups size={2} className={`mb-6 mt-2`}>
-						{blog.tags.map((tag) => (
+						{sort(blog.tags).map((tag) => (
 							<Link to={`/tags/${tag.toLowerCase()}`} key={tag}>
 								<ColorBadge text={tag} />
 							</Link>
diff --git a/src/utils/colors/index.ts b/src/utils/colors/index.ts
index 009fb4b..52f9d70 100644
--- a/src/utils/colors/index.ts
+++ b/src/utils/colors/index.ts
@@ -4,13 +4,15 @@ export function getRandomizedColor(text: string) {
 		'red',
 		'green',
 		'teal',
+		'indigo',
+		'pink',
 		'orange',
 		'yellow',
 		'purple',
 	];
 	let total = 0;
-	for (const ch of text) {
-		total += ch.charCodeAt(0);
-	}
+	Array.from(text).forEach((ch, index) => {
+		total += ch.charCodeAt(0) * Math.pow(2, index);
+	});
 	return randomColors[total % randomColors.length];
 }