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(15114902)

Main Color 2
Decimal(15109759)

Main Color 3
Decimal(15104872)

Main Color 4
Decimal(15099729)

Main Color 5
Decimal(15094842)

Main Color 6
Decimal(15089699)

Main Color 7
Decimal(15084812)

Main Color 8
Decimal(15081984)

Decimal(15114902)

100
Decimal(16112598)

200
Decimal(15447725)

300 * Your Color
Decimal(15114902)

400
Decimal(14183770)

500
Decimal(13519153)

600
Decimal(10828327)

700
Decimal(8137757)

800
Decimal(5381396)

900
Decimal(2690826)

Decimal(15109759)

100
Decimal(16243156)

200
Decimal(15643818)

300 * Your Color
Decimal(15109759)

400
Decimal(14575700)

500
Decimal(13976362)

600
Decimal(11220257)

700
Decimal(8398873)

800
Decimal(5577489)

900
Decimal(2821384)

Decimal(15104872)

100
Decimal(16308691)

200
Decimal(15840167)

300 * Your Color
Decimal(15104872)

400
Decimal(14837328)

500
Decimal(14368804)

600
Decimal(11481885)

700
Decimal(8594966)

800
Decimal(5773838)

900
Decimal(2886919)

Decimal(15099729) middle muted orange

100
Decimal(16373970)

200
Decimal(15905190)

300
Decimal(15501945)

400 * Your Color
Decimal(15099729)

500
Decimal(14629920)

600
Decimal(11677722)

700
Decimal(8791059)

800
Decimal(5838861)

900
Decimal(2952198)

Decimal(15094842) dark washed red

100
Decimal(16373970)

200
Decimal(16036004)

300
Decimal(15632759)

400 * Your Color
Decimal(15094842)

500
Decimal(14826269)

600
Decimal(11874071)

700
Decimal(8921873)

800
Decimal(5969675)

900
Decimal(2952198)

Decimal(15089699) dark washed red

100
Decimal(16439249)

200
Decimal(16101283)

300
Decimal(15698038)

400
Decimal(15360072)

500 * Your Color
Decimal(15089699)

600
Decimal(12004629)

700
Decimal(8987152)

800
Decimal(6034954)

900
Decimal(3017477)

Decimal(15084812) dark washed red

100
Decimal(16569807)

200
Decimal(16428190)

300
Decimal(16220782)

400
Decimal(16079165)

500 * Your Color
Decimal(15084812)

600
Decimal(12723722)

700
Decimal(9509896)

800
Decimal(6361861)

900
Decimal(3148035)

Decimal(15081984) dark washed red

100
Decimal(16766156)

200
Decimal(16754841)

300
Decimal(16743782)

400
Decimal(16732467)

500 * Your Color
Decimal(15081984)

600
Decimal(13377024)

700
Decimal(10032896)

800
Decimal(6688512)

900
Decimal(3344384)

CSS Code

.main-color-1{ color:#E6A296; }
.main-bg-color-1{ background-color:#E6A296; }
.main-color-2{ color:#E68E7F; }
.main-bg-color-2{ background-color:#E68E7F; }
.main-color-3{ color:#E67B68; }
.main-bg-color-3{ background-color:#E67B68; }
.main-color-4{ color:#E66751; }
.main-bg-color-4{ background-color:#E66751; }
.main-color-5{ color:#E6543A; }
.main-bg-color-5{ background-color:#E6543A; }
.main-color-6{ color:#E64023; }
.main-bg-color-6{ background-color:#E64023; }
.main-color-7{ color:#E62D0C; }
.main-bg-color-7{ background-color:#E62D0C; }
.main-color-8{ color:#E62200; }
.main-bg-color-8{ background-color:#E62200; }

.color-1-100{ color:#F5DBD6; }
.bg-color-1-100{ background-color:#F5DBD6; }
.color-1-200{ color:#EBB6AD; }
.bg-color-1-200{ background-color:#EBB6AD; }
.color-1-300{ color:#E6A296; }
.bg-color-1-300{ background-color:#E6A296; }
.color-1-400{ color:#D86D5A; }
.bg-color-1-400{ background-color:#D86D5A; }
.color-1-500{ color:#CE4931; }
.bg-color-1-500{ background-color:#CE4931; }
.color-1-600{ color:#A53A27; }
.bg-color-1-600{ background-color:#A53A27; }
.color-1-700{ color:#7C2C1D; }
.bg-color-1-700{ background-color:#7C2C1D; }
.color-1-800{ color:#521D14; }
.bg-color-1-800{ background-color:#521D14; }
.color-1-900{ color:#290F0A; }
.bg-color-1-900{ background-color:#290F0A; }

.color-2-100{ color:#F7D9D4; }
.bg-color-2-100{ background-color:#F7D9D4; }
.color-2-200{ color:#EEB4AA; }
.bg-color-2-200{ background-color:#EEB4AA; }
.color-2-300{ color:#E68E7F; }
.bg-color-2-300{ background-color:#E68E7F; }
.color-2-400{ color:#DE6854; }
.bg-color-2-400{ background-color:#DE6854; }
.color-2-500{ color:#D5432A; }
.bg-color-2-500{ background-color:#D5432A; }
.color-2-600{ color:#AB3521; }
.bg-color-2-600{ background-color:#AB3521; }
.color-2-700{ color:#802819; }
.bg-color-2-700{ background-color:#802819; }
.color-2-800{ color:#551B11; }
.bg-color-2-800{ background-color:#551B11; }
.color-2-900{ color:#2B0D08; }
.bg-color-2-900{ background-color:#2B0D08; }

.color-3-100{ color:#F8D9D3; }
.bg-color-3-100{ background-color:#F8D9D3; }
.color-3-200{ color:#F1B3A7; }
.bg-color-3-200{ background-color:#F1B3A7; }
.color-3-300{ color:#E67B68; }
.bg-color-3-300{ background-color:#E67B68; }
.color-3-400{ color:#E26650; }
.bg-color-3-400{ background-color:#E26650; }
.color-3-500{ color:#DB4024; }
.bg-color-3-500{ background-color:#DB4024; }
.color-3-600{ color:#AF331D; }
.bg-color-3-600{ background-color:#AF331D; }
.color-3-700{ color:#832616; }
.bg-color-3-700{ background-color:#832616; }
.color-3-800{ color:#581A0E; }
.bg-color-3-800{ background-color:#581A0E; }
.color-3-900{ color:#2C0D07; }
.bg-color-3-900{ background-color:#2C0D07; }

.color-4-100{ color:#F9D8D2; }
.bg-color-4-100{ background-color:#F9D8D2; }
.color-4-200{ color:#F2B1A6; }
.bg-color-4-200{ background-color:#F2B1A6; }
.color-4-300{ color:#EC8A79; }
.bg-color-4-300{ background-color:#EC8A79; }
.color-4-400{ color:#E66751; }
.bg-color-4-400{ background-color:#E66751; }
.color-4-500{ color:#DF3C20; }
.bg-color-4-500{ background-color:#DF3C20; }
.color-4-600{ color:#B2301A; }
.bg-color-4-600{ background-color:#B2301A; }
.color-4-700{ color:#862413; }
.bg-color-4-700{ background-color:#862413; }
.color-4-800{ color:#59180D; }
.bg-color-4-800{ background-color:#59180D; }
.color-4-900{ color:#2D0C06; }
.bg-color-4-900{ background-color:#2D0C06; }

.color-5-100{ color:#F9D8D2; }
.bg-color-5-100{ background-color:#F9D8D2; }
.color-5-200{ color:#F4B0A4; }
.bg-color-5-200{ background-color:#F4B0A4; }
.color-5-300{ color:#EE8977; }
.bg-color-5-300{ background-color:#EE8977; }
.color-5-400{ color:#E6543A; }
.bg-color-5-400{ background-color:#E6543A; }
.color-5-500{ color:#E23B1D; }
.bg-color-5-500{ background-color:#E23B1D; }
.color-5-600{ color:#B52F17; }
.bg-color-5-600{ background-color:#B52F17; }
.color-5-700{ color:#882311; }
.bg-color-5-700{ background-color:#882311; }
.color-5-800{ color:#5B170B; }
.bg-color-5-800{ background-color:#5B170B; }
.color-5-900{ color:#2D0C06; }
.bg-color-5-900{ background-color:#2D0C06; }

.color-6-100{ color:#FAD7D1; }
.bg-color-6-100{ background-color:#FAD7D1; }
.color-6-200{ color:#F5AFA3; }
.bg-color-6-200{ background-color:#F5AFA3; }
.color-6-300{ color:#EF8876; }
.bg-color-6-300{ background-color:#EF8876; }
.color-6-400{ color:#EA6048; }
.bg-color-6-400{ background-color:#EA6048; }
.color-6-500{ color:#E64023; }
.bg-color-6-500{ background-color:#E64023; }
.color-6-600{ color:#B72D15; }
.bg-color-6-600{ background-color:#B72D15; }
.color-6-700{ color:#892210; }
.bg-color-6-700{ background-color:#892210; }
.color-6-800{ color:#5C160A; }
.bg-color-6-800{ background-color:#5C160A; }
.color-6-900{ color:#2E0B05; }
.bg-color-6-900{ background-color:#2E0B05; }

.color-7-100{ color:#FCD5CF; }
.bg-color-7-100{ background-color:#FCD5CF; }
.color-7-200{ color:#FAAC9E; }
.bg-color-7-200{ background-color:#FAAC9E; }
.color-7-300{ color:#F7826E; }
.bg-color-7-300{ background-color:#F7826E; }
.color-7-400{ color:#F5593D; }
.bg-color-7-400{ background-color:#F5593D; }
.color-7-500{ color:#E62D0C; }
.bg-color-7-500{ background-color:#E62D0C; }
.color-7-600{ color:#C2260A; }
.bg-color-7-600{ background-color:#C2260A; }
.color-7-700{ color:#911C08; }
.bg-color-7-700{ background-color:#911C08; }
.color-7-800{ color:#611305; }
.bg-color-7-800{ background-color:#611305; }
.color-7-900{ color:#300903; }
.bg-color-7-900{ background-color:#300903; }

.color-8-100{ color:#FFD4CC; }
.bg-color-8-100{ background-color:#FFD4CC; }
.color-8-200{ color:#FFA899; }
.bg-color-8-200{ background-color:#FFA899; }
.color-8-300{ color:#FF7D66; }
.bg-color-8-300{ background-color:#FF7D66; }
.color-8-400{ color:#FF5133; }
.bg-color-8-400{ background-color:#FF5133; }
.color-8-500{ color:#E62200; }
.bg-color-8-500{ background-color:#E62200; }
.color-8-600{ color:#CC1E00; }
.bg-color-8-600{ background-color:#CC1E00; }
.color-8-700{ color:#991700; }
.bg-color-8-700{ background-color:#991700; }
.color-8-800{ color:#660F00; }
.bg-color-8-800{ background-color:#660F00; }
.color-8-900{ color:#330800; }
.bg-color-8-900{ background-color:#330800; }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Decimal(15114902)	Decimal(15109759)	Decimal(15104872)	Decimal(15099729)	Decimal(15094842)	Decimal(15089699)	Decimal(15084812)	Decimal(15081984)

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(15114902)		Ratio: 1.17 Failed ⁵	Ratio: 1.35 Failed ⁵	Ratio: 1.55 Failed ⁵	Ratio: 1.75 Failed ⁵	Ratio: 1.95 Failed ⁵	Ratio: 2.10 Failed ⁵	Ratio: 2.17 Failed ⁵
Decimal(15109759)	Ratio: 1.17 Failed ⁵		Ratio: 1.15 Failed ⁵	Ratio: 1.33 Failed ⁵	Ratio: 1.50 Failed ⁵	Ratio: 1.67 Failed ⁵	Ratio: 1.80 Failed ⁵	Ratio: 1.86 Failed ⁵
Decimal(15104872)	Ratio: 1.35 Failed ⁵	Ratio: 1.15 Failed ⁵		Ratio: 1.15 Failed ⁵	Ratio: 1.30 Failed ⁵	Ratio: 1.44 Failed ⁵	Ratio: 1.56 Failed ⁵	Ratio: 1.61 Failed ⁵
Decimal(15099729)	Ratio: 1.55 Failed ⁵	Ratio: 1.33 Failed ⁵	Ratio: 1.15 Failed ⁵		Ratio: 1.13 Failed ⁵	Ratio: 1.25 Failed ⁵	Ratio: 1.35 Failed ⁵	Ratio: 1.40 Failed ⁵
Decimal(15094842)	Ratio: 1.75 Failed ⁵	Ratio: 1.50 Failed ⁵	Ratio: 1.30 Failed ⁵	Ratio: 1.13 Failed ⁵		Ratio: 1.11 Failed ⁵	Ratio: 1.20 Failed ⁵	Ratio: 1.24 Failed ⁵
Decimal(15089699)	Ratio: 1.95 Failed ⁵	Ratio: 1.67 Failed ⁵	Ratio: 1.44 Failed ⁵	Ratio: 1.25 Failed ⁵	Ratio: 1.11 Failed ⁵		Ratio: 1.08 Failed ⁵	Ratio: 1.12 Failed ⁵
Decimal(15084812)	Ratio: 2.10 Failed ⁵	Ratio: 1.80 Failed ⁵	Ratio: 1.56 Failed ⁵	Ratio: 1.35 Failed ⁵	Ratio: 1.20 Failed ⁵	Ratio: 1.08 Failed ⁵		Ratio: 1.03 Failed ⁵
Decimal(15081984)	Ratio: 2.17 Failed ⁵	Ratio: 1.86 Failed ⁵	Ratio: 1.61 Failed ⁵	Ratio: 1.40 Failed ⁵	Ratio: 1.24 Failed ⁵	Ratio: 1.12 Failed ⁵	Ratio: 1.03 Failed ⁵

Color Bucket