Converting Colors

❗NEW❗ Image color palette picker

The color bucket can contain a maximum of 10 colors (with a PRO membership up to 20 colors!) and auto-create color palettes for each of these colors based on the lightness. You can select the output format before you start:

Copy the permanent link to this color bucket here:

The color bucket you are viewing right now is a fixed bucket reachable via the link above. To create your color bucket, please visit the color bucket's main page.

Color Palette · WCAG Matrix

Color Palette

Main Color 1
Decimal(10212559)

Main Color 2
Decimal(11588817)

Main Color 3
Decimal(12965075)

Main Color 4
Decimal(14406869)

Main Color 5
Decimal(15783126)

Main Color 6
Decimal(16766168)

Main Color 7
Decimal(16766170)

Main Color 8
Decimal(16766172)

Main Color 9
Decimal(16766174)

Main Color 10
Decimal(16766176)

Decimal(10212559)

100
Decimal(14414062)

200
Decimal(12116189)

300 * Your Color
Decimal(10212559)

400
Decimal(7389883)

500
Decimal(5092009)

600
Decimal(4034440)

700
Decimal(3042150)

800
Decimal(2049860)

900
Decimal(992290)

Decimal(11588817)

100
Decimal(14609900)

200 * Your Color
Decimal(11588817)

300
Decimal(10275269)

400
Decimal(8107954)

500
Decimal(5940639)

600
Decimal(4752511)

700
Decimal(3564383)

800
Decimal(2376256)

900
Decimal(1188128)

Decimal(12965075)

100
Decimal(14871017)

200 * Your Color
Decimal(12965075)

300
Decimal(10993340)

400
Decimal(9087142)

500
Decimal(7180944)

600
Decimal(5731699)

700
Decimal(4282454)

800
Decimal(2833210)

900
Decimal(1449245)

Decimal(14406869)

100
Decimal(15262692)

200 * Your Color
Decimal(14406869)

300
Decimal(12168366)

400
Decimal(10653843)

500
Decimal(9139319)

600
Decimal(7298400)

700
Decimal(5457480)

800
Decimal(3681840)

900
Decimal(1840920)

Decimal(15783126)

100 * Your Color
Decimal(15783126)

200
Decimal(15053751)

300
Decimal(14126739)

400
Decimal(13265007)

500
Decimal(12403275)

600
Decimal(9909564)

700
Decimal(7415853)

800
Decimal(4987422)

900
Decimal(2493711)

Decimal(16766168)

100 * Your Color
Decimal(16766168)

200
Decimal(16751010)

300
Decimal(16737908)

400
Decimal(16724806)

500
Decimal(16711704)

600
Decimal(13369363)

700
Decimal(10027022)

800
Decimal(6684681)

900
Decimal(3342341)

Decimal(16766170)

100 * Your Color
Decimal(16766170)

200
Decimal(16751015)

300
Decimal(16737915)

400
Decimal(16724815)

500
Decimal(16711716)

600
Decimal(13369372)

700
Decimal(10027029)

800
Decimal(6684686)

900
Decimal(3342343)

Decimal(16766172)

100 * Your Color
Decimal(16766172)

200
Decimal(16751020)

300
Decimal(16737922)

400
Decimal(16724825)

500
Decimal(16711727)

600
Decimal(13369382)

700
Decimal(10027036)

800
Decimal(6684691)

900
Decimal(3342345)

Decimal(16766174)

100 * Your Color
Decimal(16766174)

200
Decimal(16751025)

300
Decimal(16737930)

400
Decimal(16724834)

500
Decimal(16711739)

600
Decimal(13369391)

700
Decimal(10027044)

800
Decimal(6684696)

900
Decimal(3342348)

Decimal(16766176)

100 * Your Color
Decimal(16766176)

200
Decimal(16751029)

300
Decimal(16737937)

400
Decimal(16724844)

500
Decimal(16711751)

600
Decimal(13369401)

700
Decimal(10027051)

800
Decimal(6684700)

900
Decimal(3342350)

CSS Code

.main-color-1{ color:#9BD4CF; }
.main-bg-color-1{ background-color:#9BD4CF; }
.main-color-2{ color:#B0D4D1; }
.main-bg-color-2{ background-color:#B0D4D1; }
.main-color-3{ color:#C5D4D3; }
.main-bg-color-3{ background-color:#C5D4D3; }
.main-color-4{ color:#DBD4D5; }
.main-bg-color-4{ background-color:#DBD4D5; }
.main-color-5{ color:#F0D4D6; }
.main-bg-color-5{ background-color:#F0D4D6; }
.main-color-6{ color:#FFD4D8; }
.main-bg-color-6{ background-color:#FFD4D8; }
.main-color-7{ color:#FFD4DA; }
.main-bg-color-7{ background-color:#FFD4DA; }
.main-color-8{ color:#FFD4DC; }
.main-bg-color-8{ background-color:#FFD4DC; }
.main-color-9{ color:#FFD4DE; }
.main-bg-color-9{ background-color:#FFD4DE; }
.main-color-10{ color:#FFD4E0; }
.main-bg-color-10{ background-color:#FFD4E0; }

.color-1-100{ color:#DBF0EE; }
.bg-color-1-100{ background-color:#DBF0EE; }
.color-1-200{ color:#B8E0DD; }
.bg-color-1-200{ background-color:#B8E0DD; }
.color-1-300{ color:#9BD4CF; }
.bg-color-1-300{ background-color:#9BD4CF; }
.color-1-400{ color:#70C2BB; }
.bg-color-1-400{ background-color:#70C2BB; }
.color-1-500{ color:#4DB2A9; }
.bg-color-1-500{ background-color:#4DB2A9; }
.color-1-600{ color:#3D8F88; }
.bg-color-1-600{ background-color:#3D8F88; }
.color-1-700{ color:#2E6B66; }
.bg-color-1-700{ background-color:#2E6B66; }
.color-1-800{ color:#1F4744; }
.bg-color-1-800{ background-color:#1F4744; }
.color-1-900{ color:#0F2422; }
.bg-color-1-900{ background-color:#0F2422; }

.color-2-100{ color:#DEEDEC; }
.bg-color-2-100{ background-color:#DEEDEC; }
.color-2-200{ color:#B0D4D1; }
.bg-color-2-200{ background-color:#B0D4D1; }
.color-2-300{ color:#9CC9C5; }
.bg-color-2-300{ background-color:#9CC9C5; }
.color-2-400{ color:#7BB7B2; }
.bg-color-2-400{ background-color:#7BB7B2; }
.color-2-500{ color:#5AA59F; }
.bg-color-2-500{ background-color:#5AA59F; }
.color-2-600{ color:#48847F; }
.bg-color-2-600{ background-color:#48847F; }
.color-2-700{ color:#36635F; }
.bg-color-2-700{ background-color:#36635F; }
.color-2-800{ color:#244240; }
.bg-color-2-800{ background-color:#244240; }
.color-2-900{ color:#122120; }
.bg-color-2-900{ background-color:#122120; }

.color-3-100{ color:#E2E9E9; }
.bg-color-3-100{ background-color:#E2E9E9; }
.color-3-200{ color:#C5D4D3; }
.bg-color-3-200{ background-color:#C5D4D3; }
.color-3-300{ color:#A7BEBC; }
.bg-color-3-300{ background-color:#A7BEBC; }
.color-3-400{ color:#8AA8A6; }
.bg-color-3-400{ background-color:#8AA8A6; }
.color-3-500{ color:#6D9290; }
.bg-color-3-500{ background-color:#6D9290; }
.color-3-600{ color:#577573; }
.bg-color-3-600{ background-color:#577573; }
.color-3-700{ color:#415856; }
.bg-color-3-700{ background-color:#415856; }
.color-3-800{ color:#2B3B3A; }
.bg-color-3-800{ background-color:#2B3B3A; }
.color-3-900{ color:#161D1D; }
.bg-color-3-900{ background-color:#161D1D; }

.color-4-100{ color:#E8E3E4; }
.bg-color-4-100{ background-color:#E8E3E4; }
.color-4-200{ color:#DBD4D5; }
.bg-color-4-200{ background-color:#DBD4D5; }
.color-4-300{ color:#B9ACAE; }
.bg-color-4-300{ background-color:#B9ACAE; }
.color-4-400{ color:#A29093; }
.bg-color-4-400{ background-color:#A29093; }
.color-4-500{ color:#8B7477; }
.bg-color-4-500{ background-color:#8B7477; }
.color-4-600{ color:#6F5D60; }
.bg-color-4-600{ background-color:#6F5D60; }
.color-4-700{ color:#534648; }
.bg-color-4-700{ background-color:#534648; }
.color-4-800{ color:#382E30; }
.bg-color-4-800{ background-color:#382E30; }
.color-4-900{ color:#1C1718; }
.bg-color-4-900{ background-color:#1C1718; }

.color-5-100{ color:#F0D4D6; }
.bg-color-5-100{ background-color:#F0D4D6; }
.color-5-200{ color:#E5B3B7; }
.bg-color-5-200{ background-color:#E5B3B7; }
.color-5-300{ color:#D78E93; }
.bg-color-5-300{ background-color:#D78E93; }
.color-5-400{ color:#CA686F; }
.bg-color-5-400{ background-color:#CA686F; }
.color-5-500{ color:#BD424B; }
.bg-color-5-500{ background-color:#BD424B; }
.color-5-600{ color:#97353C; }
.bg-color-5-600{ background-color:#97353C; }
.color-5-700{ color:#71282D; }
.bg-color-5-700{ background-color:#71282D; }
.color-5-800{ color:#4C1A1E; }
.bg-color-5-800{ background-color:#4C1A1E; }
.color-5-900{ color:#260D0F; }
.bg-color-5-900{ background-color:#260D0F; }

.color-6-100{ color:#FFD4D8; }
.bg-color-6-100{ background-color:#FFD4D8; }
.color-6-200{ color:#FF99A2; }
.bg-color-6-200{ background-color:#FF99A2; }
.color-6-300{ color:#FF6674; }
.bg-color-6-300{ background-color:#FF6674; }
.color-6-400{ color:#FF3346; }
.bg-color-6-400{ background-color:#FF3346; }
.color-6-500{ color:#FF0018; }
.bg-color-6-500{ background-color:#FF0018; }
.color-6-600{ color:#CC0013; }
.bg-color-6-600{ background-color:#CC0013; }
.color-6-700{ color:#99000E; }
.bg-color-6-700{ background-color:#99000E; }
.color-6-800{ color:#660009; }
.bg-color-6-800{ background-color:#660009; }
.color-6-900{ color:#330005; }
.bg-color-6-900{ background-color:#330005; }

.color-7-100{ color:#FFD4DA; }
.bg-color-7-100{ background-color:#FFD4DA; }
.color-7-200{ color:#FF99A7; }
.bg-color-7-200{ background-color:#FF99A7; }
.color-7-300{ color:#FF667B; }
.bg-color-7-300{ background-color:#FF667B; }
.color-7-400{ color:#FF334F; }
.bg-color-7-400{ background-color:#FF334F; }
.color-7-500{ color:#FF0024; }
.bg-color-7-500{ background-color:#FF0024; }
.color-7-600{ color:#CC001C; }
.bg-color-7-600{ background-color:#CC001C; }
.color-7-700{ color:#990015; }
.bg-color-7-700{ background-color:#990015; }
.color-7-800{ color:#66000E; }
.bg-color-7-800{ background-color:#66000E; }
.color-7-900{ color:#330007; }
.bg-color-7-900{ background-color:#330007; }

.color-8-100{ color:#FFD4DC; }
.bg-color-8-100{ background-color:#FFD4DC; }
.color-8-200{ color:#FF99AC; }
.bg-color-8-200{ background-color:#FF99AC; }
.color-8-300{ color:#FF6682; }
.bg-color-8-300{ background-color:#FF6682; }
.color-8-400{ color:#FF3359; }
.bg-color-8-400{ background-color:#FF3359; }
.color-8-500{ color:#FF002F; }
.bg-color-8-500{ background-color:#FF002F; }
.color-8-600{ color:#CC0026; }
.bg-color-8-600{ background-color:#CC0026; }
.color-8-700{ color:#99001C; }
.bg-color-8-700{ background-color:#99001C; }
.color-8-800{ color:#660013; }
.bg-color-8-800{ background-color:#660013; }
.color-8-900{ color:#330009; }
.bg-color-8-900{ background-color:#330009; }

.color-9-100{ color:#FFD4DE; }
.bg-color-9-100{ background-color:#FFD4DE; }
.color-9-200{ color:#FF99B1; }
.bg-color-9-200{ background-color:#FF99B1; }
.color-9-300{ color:#FF668A; }
.bg-color-9-300{ background-color:#FF668A; }
.color-9-400{ color:#FF3362; }
.bg-color-9-400{ background-color:#FF3362; }
.color-9-500{ color:#FF003B; }
.bg-color-9-500{ background-color:#FF003B; }
.color-9-600{ color:#CC002F; }
.bg-color-9-600{ background-color:#CC002F; }
.color-9-700{ color:#990024; }
.bg-color-9-700{ background-color:#990024; }
.color-9-800{ color:#660018; }
.bg-color-9-800{ background-color:#660018; }
.color-9-900{ color:#33000C; }
.bg-color-9-900{ background-color:#33000C; }

.color-10-100{ color:#FFD4E0; }
.bg-color-10-100{ background-color:#FFD4E0; }
.color-10-200{ color:#FF99B5; }
.bg-color-10-200{ background-color:#FF99B5; }
.color-10-300{ color:#FF6691; }
.bg-color-10-300{ background-color:#FF6691; }
.color-10-400{ color:#FF336C; }
.bg-color-10-400{ background-color:#FF336C; }
.color-10-500{ color:#FF0047; }
.bg-color-10-500{ background-color:#FF0047; }
.color-10-600{ color:#CC0039; }
.bg-color-10-600{ background-color:#CC0039; }
.color-10-700{ color:#99002B; }
.bg-color-10-700{ background-color:#99002B; }
.color-10-800{ color:#66001C; }
.bg-color-10-800{ background-color:#66001C; }
.color-10-900{ color:#33000E; }
.bg-color-10-900{ background-color:#33000E; }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Decimal(10212559)	Decimal(11588817)	Decimal(12965075)	Decimal(14406869)	Decimal(15783126)	Decimal(16766168)	Decimal(16766170)	Decimal(16766172)	Decimal(16766174)	Decimal(16766176)

Details can be found at https://www.w3.org/TR/WCAG20/. ¹ AA AA level of the Web Content Accessibility Guidelines (WCAG) 2.0 for any text size. ² AA 18pt AA level for large text above 18pt. ³ AAA AAA level of the Web Content Accessibility Guidelines (WCAG) 2.0 for any text size. ⁴ AAA 18pt AAA level for large text above 18pt. ⁵ Failed Fails to comply with the Web Content Accessibility Guidelines (WCAG) 2.0. ⁶ Passed Passes the AAA level of the Web Content Accessibility Guidelines (WCAG) 2.0 for all text sizes.
Decimal(10212559)		Ratio: 1.04 Failed ⁵	Ratio: 1.08 Failed ⁵	Ratio: 1.13 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.23 Failed ⁵	Ratio: 1.23 Failed ⁵	Ratio: 1.24 Failed ⁵	Ratio: 1.24 Failed ⁵	Ratio: 1.24 Failed ⁵
Decimal(11588817)	Ratio: 1.04 Failed ⁵		Ratio: 1.04 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.19 Failed ⁵
Decimal(12965075)	Ratio: 1.08 Failed ⁵	Ratio: 1.04 Failed ⁵		Ratio: 1.05 Failed ⁵	Ratio: 1.10 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.15 Failed ⁵	Ratio: 1.15 Failed ⁵
Decimal(14406869)	Ratio: 1.13 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.05 Failed ⁵		Ratio: 1.05 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.09 Failed ⁵
Decimal(15783126)	Ratio: 1.19 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.10 Failed ⁵	Ratio: 1.05 Failed ⁵		Ratio: 1.04 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.04 Failed ⁵
Decimal(16766168)	Ratio: 1.23 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.04 Failed ⁵		Ratio: 1.00 Failed ⁵	Ratio: 1.00 Failed ⁵	Ratio: 1.00 Failed ⁵	Ratio: 1.01 Failed ⁵
Decimal(16766170)	Ratio: 1.23 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.00 Failed ⁵		Ratio: 1.00 Failed ⁵	Ratio: 1.00 Failed ⁵	Ratio: 1.00 Failed ⁵
Decimal(16766172)	Ratio: 1.24 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.00 Failed ⁵	Ratio: 1.00 Failed ⁵		Ratio: 1.00 Failed ⁵	Ratio: 1.00 Failed ⁵
Decimal(16766174)	Ratio: 1.24 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.15 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.00 Failed ⁵	Ratio: 1.00 Failed ⁵	Ratio: 1.00 Failed ⁵		Ratio: 1.00 Failed ⁵
Decimal(16766176)	Ratio: 1.24 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.15 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.00 Failed ⁵	Ratio: 1.00 Failed ⁵	Ratio: 1.00 Failed ⁵

Color Bucket