diff --git a/badge-maker/lib/color.js b/badge-maker/lib/color.js
index 0b8dd98ac0c15..391e28e4984a4 100644
--- a/badge-maker/lib/color.js
+++ b/badge-maker/lib/color.js
@@ -1,6 +1,6 @@
 'use strict'
 
-const cssColorConverter = require('css-color-converter')
+const { fromString } = require('css-color-converter')
 
 // When updating these, be sure also to update the list in `badge-maker/README.md`.
 const namedColors = {
@@ -38,10 +38,7 @@ function isHexColor(s = '') {
 }
 
 function isCSSColor(color) {
-  return (
-    typeof color === 'string' &&
-    typeof cssColorConverter(color.trim()).toRgbaArray() !== 'undefined'
-  )
+  return typeof color === 'string' && fromString(color.trim())
 }
 
 function normalizeColor(color) {
@@ -73,8 +70,9 @@ function toSvgColor(color) {
 
 function brightness(color) {
   if (color) {
-    const rgb = cssColorConverter(color).toRgbaArray()
-    if (rgb) {
+    const cssColor = fromString(color)
+    if (cssColor) {
+      const rgb = cssColor.toRgbaArray()
       return +((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 255000).toFixed(2)
     }
   }
diff --git a/badge-maker/lib/color.spec.js b/badge-maker/lib/color.spec.js
index 4ff5b39d1b1c0..65326f9d56854 100644
--- a/badge-maker/lib/color.spec.js
+++ b/badge-maker/lib/color.spec.js
@@ -37,7 +37,7 @@ test(normalizeColor, () => {
   given('  blue ').expect('  blue ')
   given('rgb(100%, 200%, 222%)').expect('rgb(100%, 200%, 222%)')
   given('rgb(122, 200, 222)').expect('rgb(122, 200, 222)')
-  given('rgb(100%, 200, 222)').expect('rgb(100%, 200, 222)')
+  given('rgb(122, 200, 222, 1)').expect('rgb(122, 200, 222, 1)')
   given('rgba(100, 20, 111, 1)').expect('rgba(100, 20, 111, 1)')
   given('hsl(122, 200%, 222%)').expect('hsl(122, 200%, 222%)')
   given('hsla(122, 200%, 222%, 1)').expect('hsla(122, 200%, 222%, 1)')
@@ -46,8 +46,8 @@ test(normalizeColor, () => {
     given(''),
     given('not-a-color'),
     given('#ABCFGH'),
-    given('rgb(122, 200, 222, 1)'),
     given('rgb(-100, 20, 111)'),
+    given('rgb(100%, 200, 222)'),
     given('rgba(-100, 20, 111, 1.1)'),
     given('hsl(122, 200, 222, 1)'),
     given('hsl(122, 200, 222)'),
diff --git a/badge-maker/lib/make-badge.spec.js b/badge-maker/lib/make-badge.spec.js
index 8e0f147b7ef51..b6589c114d6a9 100644
--- a/badge-maker/lib/make-badge.spec.js
+++ b/badge-maker/lib/make-badge.spec.js
@@ -34,10 +34,14 @@ describe('The badge generator', function () {
       ]).expect('#abc123')
       // valid rgb(a)
       given('rgb(0,128,255)').expect('rgb(0,128,255)')
+      given('rgb(220,128,255,0.5)').expect('rgb(220,128,255,0.5)')
+      given('rgba(0,0,255)').expect('rgba(0,0,255)')
       given('rgba(0,128,255,0)').expect('rgba(0,128,255,0)')
       // valid hsl(a)
       given('hsl(100, 56%, 10%)').expect('hsl(100, 56%, 10%)')
+      given('hsl(360,50%,50%,0.5)').expect('hsl(360,50%,50%,0.5)')
       given('hsla(25,20%,0%,0.1)').expect('hsla(25,20%,0%,0.1)')
+      given('hsla(0,50%,101%)').expect('hsla(0,50%,101%)')
       // CSS named color.
       given('papayawhip').expect('papayawhip')
       // Shields named color.
@@ -53,12 +57,6 @@ describe('The badge generator', function () {
         // invalid hex
         given('#123red'), // contains letter above F
         given('#red'), // contains letter above F
-        // invalid rgb(a)
-        given('rgb(220,128,255,0.5)'), // has alpha
-        given('rgba(0,0,255)'), // no alpha
-        // invalid hsl(a)
-        given('hsl(360,50%,50%,0.5)'), // has alpha
-        given('hsla(0,50%,101%)'), // no alpha
         // neither a css named color nor colorscheme
         given('notacolor'),
         given('bluish'),
diff --git a/badge-maker/package.json b/badge-maker/package.json
index fc94bfe5646e6..e8d9bc0337f57 100644
--- a/badge-maker/package.json
+++ b/badge-maker/package.json
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "anafanafo": "^1.0.0",
-    "css-color-converter": "^1.1.1"
+    "css-color-converter": "^2.0.0"
   },
   "scripts": {
     "test": "echo 'Run tests from parent dir'; false"
diff --git a/package-lock.json b/package-lock.json
index 607a56e2c2ed6..d515271424d93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9927,7 +9927,7 @@
       "version": "file:badge-maker",
       "requires": {
         "anafanafo": "^1.0.0",
-        "css-color-converter": "^1.1.1"
+        "css-color-converter": "^2.0.0"
       }
     },
     "bail": {
@@ -12711,18 +12711,24 @@
       "dev": true
     },
     "css-color-converter": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/css-color-converter/-/css-color-converter-1.1.1.tgz",
-      "integrity": "sha512-Fx7twabisBA+FQQ72VY/gzoSXL8RfzqKtldotbpeJjwFUYwUPBd5fm6ut/mK2T8JMPWph2CY1TpVIhy4I0ko+Q==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-converter/-/css-color-converter-2.0.0.tgz",
+      "integrity": "sha512-oLIG2soZz3wcC3aAl/7Us5RS8Hvvc6I8G8LniF/qfMmrm7fIKQ8RIDDRZeKyGL2SrWfNqYspuLShbnjBMVWm8g==",
       "requires": {
         "color-convert": "^0.5.2",
-        "color-name": "^1.0.0"
+        "color-name": "^1.1.4",
+        "css-unit-converter": "^1.1.2"
       },
       "dependencies": {
         "color-convert": {
           "version": "0.5.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
           "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         }
       }
     },
@@ -12876,6 +12882,11 @@
         }
       }
     },
+    "css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
+    },
     "css-what": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz",