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

Main Color 2
Decimal(14982542)

Main Color 3
Decimal(14977655)

Main Color 4
Decimal(14973025)

Main Color 5
Decimal(14968138)

Main Color 6
Decimal(14963251)

Main Color 7
Decimal(14958364)

Main Color 8
Decimal(14953477)

Main Color 9
Decimal(14952448)

Decimal(14987429)

100
Decimal(15982040)

200 * Your Color
Decimal(14987429)

300
Decimal(14456969)

400
Decimal(13661538)

500
Decimal(12866363)

600
Decimal(10306095)

700
Decimal(7746083)

800
Decimal(5120280)

900
Decimal(2560268)

Decimal(14982542)

100
Decimal(16112598)

200
Decimal(15448237)

300 * Your Color
Decimal(14982542)

400
Decimal(14184538)

500
Decimal(13520177)

600
Decimal(10829095)

700
Decimal(8072734)

800
Decimal(5381908)

900
Decimal(2690826)

Decimal(14977655)

100
Decimal(16243412)

200
Decimal(15644330)

300 * Your Color
Decimal(14977655)

400
Decimal(14511445)

500
Decimal(13977642)

600
Decimal(11156002)

700
Decimal(8399641)

800
Decimal(5578001)

900
Decimal(2821640)

Decimal(14973025)

100
Decimal(16308947)

200
Decimal(15775144)

300
Decimal(15306620)

400 * Your Color
Decimal(14973025)

500
Decimal(14304549)

600
Decimal(11417374)

700
Decimal(8595734)

800
Decimal(5708815)

900
Decimal(2887175)

Decimal(14968138) middle muted orange

100
Decimal(16308691)

200
Decimal(15905702)

300
Decimal(15437434)

400 * Your Color
Decimal(14968138)

500
Decimal(14565921)

600
Decimal(11679002)

700
Decimal(8726548)

800
Decimal(5839373)

900
Decimal(2886919)

Decimal(14963251) dark washed red

100
Decimal(16374226)

200
Decimal(15971237)

300
Decimal(15567992)

400
Decimal(15165003)

500 * Your Color
Decimal(14963251)

600
Decimal(11809560)

700
Decimal(8857106)

800
Decimal(5904908)

900
Decimal(2952454)

Decimal(14958364) dark washed red

100
Decimal(16439505)

200
Decimal(16036516)

300
Decimal(15698806)

400
Decimal(15295817)

500 * Your Color
Decimal(14958364)

600
Decimal(11940374)

700
Decimal(8987920)

800
Decimal(5970187)

900
Decimal(3017733)

Decimal(14953477) dark washed red

100
Decimal(16701133)

200
Decimal(16624795)

300
Decimal(16548713)

400
Decimal(16472631)

500 * Your Color
Decimal(14953477)

600
Decimal(13117188)

700
Decimal(9837827)

800
Decimal(6558466)

900
Decimal(3279361)

Decimal(14952448) dark washed red

100
Decimal(16766412)

200
Decimal(16755609)

300
Decimal(16744806)

400
Decimal(16734003)

500
Decimal(16723200)

600 * Your Color
Decimal(14952448)

700
Decimal(10033920)

800
Decimal(6689280)

900
Decimal(3344640)

CSS Code

.main-color-1{ color:#E4B0A5; }
.main-bg-color-1{ background-color:#E4B0A5; }
.main-color-2{ color:#E49D8E; }
.main-bg-color-2{ background-color:#E49D8E; }
.main-color-3{ color:#E48A77; }
.main-bg-color-3{ background-color:#E48A77; }
.main-color-4{ color:#E47861; }
.main-bg-color-4{ background-color:#E47861; }
.main-color-5{ color:#E4654A; }
.main-bg-color-5{ background-color:#E4654A; }
.main-color-6{ color:#E45233; }
.main-bg-color-6{ background-color:#E45233; }
.main-color-7{ color:#E43F1C; }
.main-bg-color-7{ background-color:#E43F1C; }
.main-color-8{ color:#E42C05; }
.main-bg-color-8{ background-color:#E42C05; }
.main-color-9{ color:#E42800; }
.main-bg-color-9{ background-color:#E42800; }

.color-1-100{ color:#F3DDD8; }
.bg-color-1-100{ background-color:#F3DDD8; }
.color-1-200{ color:#E4B0A5; }
.bg-color-1-200{ background-color:#E4B0A5; }
.color-1-300{ color:#DC9889; }
.bg-color-1-300{ background-color:#DC9889; }
.color-1-400{ color:#D07562; }
.bg-color-1-400{ background-color:#D07562; }
.color-1-500{ color:#C4533B; }
.bg-color-1-500{ background-color:#C4533B; }
.color-1-600{ color:#9D422F; }
.bg-color-1-600{ background-color:#9D422F; }
.color-1-700{ color:#763223; }
.bg-color-1-700{ background-color:#763223; }
.color-1-800{ color:#4E2118; }
.bg-color-1-800{ background-color:#4E2118; }
.color-1-900{ color:#27110C; }
.bg-color-1-900{ background-color:#27110C; }

.color-2-100{ color:#F5DBD6; }
.bg-color-2-100{ background-color:#F5DBD6; }
.color-2-200{ color:#EBB8AD; }
.bg-color-2-200{ background-color:#EBB8AD; }
.color-2-300{ color:#E49D8E; }
.bg-color-2-300{ background-color:#E49D8E; }
.color-2-400{ color:#D8705A; }
.bg-color-2-400{ background-color:#D8705A; }
.color-2-500{ color:#CE4D31; }
.bg-color-2-500{ background-color:#CE4D31; }
.color-2-600{ color:#A53D27; }
.bg-color-2-600{ background-color:#A53D27; }
.color-2-700{ color:#7B2E1E; }
.bg-color-2-700{ background-color:#7B2E1E; }
.color-2-800{ color:#521F14; }
.bg-color-2-800{ background-color:#521F14; }
.color-2-900{ color:#290F0A; }
.bg-color-2-900{ background-color:#290F0A; }

.color-3-100{ color:#F7DAD4; }
.bg-color-3-100{ background-color:#F7DAD4; }
.color-3-200{ color:#EEB6AA; }
.bg-color-3-200{ background-color:#EEB6AA; }
.color-3-300{ color:#E48A77; }
.bg-color-3-300{ background-color:#E48A77; }
.color-3-400{ color:#DD6D55; }
.bg-color-3-400{ background-color:#DD6D55; }
.color-3-500{ color:#D5482A; }
.bg-color-3-500{ background-color:#D5482A; }
.color-3-600{ color:#AA3A22; }
.bg-color-3-600{ background-color:#AA3A22; }
.color-3-700{ color:#802B19; }
.bg-color-3-700{ background-color:#802B19; }
.color-3-800{ color:#551D11; }
.bg-color-3-800{ background-color:#551D11; }
.color-3-900{ color:#2B0E08; }
.bg-color-3-900{ background-color:#2B0E08; }

.color-4-100{ color:#F8DAD3; }
.bg-color-4-100{ background-color:#F8DAD3; }
.color-4-200{ color:#F0B5A8; }
.bg-color-4-200{ background-color:#F0B5A8; }
.color-4-300{ color:#E98F7C; }
.bg-color-4-300{ background-color:#E98F7C; }
.color-4-400{ color:#E47861; }
.bg-color-4-400{ background-color:#E47861; }
.color-4-500{ color:#DA4525; }
.bg-color-4-500{ background-color:#DA4525; }
.color-4-600{ color:#AE371E; }
.bg-color-4-600{ background-color:#AE371E; }
.color-4-700{ color:#832916; }
.bg-color-4-700{ background-color:#832916; }
.color-4-800{ color:#571C0F; }
.bg-color-4-800{ background-color:#571C0F; }
.color-4-900{ color:#2C0E07; }
.bg-color-4-900{ background-color:#2C0E07; }

.color-5-100{ color:#F8D9D3; }
.bg-color-5-100{ background-color:#F8D9D3; }
.color-5-200{ color:#F2B3A6; }
.bg-color-5-200{ background-color:#F2B3A6; }
.color-5-300{ color:#EB8E7A; }
.bg-color-5-300{ background-color:#EB8E7A; }
.color-5-400{ color:#E4654A; }
.bg-color-5-400{ background-color:#E4654A; }
.color-5-500{ color:#DE4221; }
.bg-color-5-500{ background-color:#DE4221; }
.color-5-600{ color:#B2351A; }
.bg-color-5-600{ background-color:#B2351A; }
.color-5-700{ color:#852814; }
.bg-color-5-700{ background-color:#852814; }
.color-5-800{ color:#591A0D; }
.bg-color-5-800{ background-color:#591A0D; }
.color-5-900{ color:#2C0D07; }
.bg-color-5-900{ background-color:#2C0D07; }

.color-6-100{ color:#F9D9D2; }
.bg-color-6-100{ background-color:#F9D9D2; }
.color-6-200{ color:#F3B3A5; }
.bg-color-6-200{ background-color:#F3B3A5; }
.color-6-300{ color:#ED8C78; }
.bg-color-6-300{ background-color:#ED8C78; }
.color-6-400{ color:#E7664B; }
.bg-color-6-400{ background-color:#E7664B; }
.color-6-500{ color:#E45233; }
.bg-color-6-500{ background-color:#E45233; }
.color-6-600{ color:#B43318; }
.bg-color-6-600{ background-color:#B43318; }
.color-6-700{ color:#872612; }
.bg-color-6-700{ background-color:#872612; }
.color-6-800{ color:#5A1A0C; }
.bg-color-6-800{ background-color:#5A1A0C; }
.color-6-900{ color:#2D0D06; }
.bg-color-6-900{ background-color:#2D0D06; }

.color-7-100{ color:#FAD8D1; }
.bg-color-7-100{ background-color:#FAD8D1; }
.color-7-200{ color:#F4B2A4; }
.bg-color-7-200{ background-color:#F4B2A4; }
.color-7-300{ color:#EF8B76; }
.bg-color-7-300{ background-color:#EF8B76; }
.color-7-400{ color:#E96549; }
.bg-color-7-400{ background-color:#E96549; }
.color-7-500{ color:#E43F1C; }
.bg-color-7-500{ background-color:#E43F1C; }
.color-7-600{ color:#B63216; }
.bg-color-7-600{ background-color:#B63216; }
.color-7-700{ color:#892510; }
.bg-color-7-700{ background-color:#892510; }
.color-7-800{ color:#5B190B; }
.bg-color-7-800{ background-color:#5B190B; }
.color-7-900{ color:#2E0C05; }
.bg-color-7-900{ background-color:#2E0C05; }

.color-8-100{ color:#FED6CD; }
.bg-color-8-100{ background-color:#FED6CD; }
.color-8-200{ color:#FDAC9B; }
.bg-color-8-200{ background-color:#FDAC9B; }
.color-8-300{ color:#FC8369; }
.bg-color-8-300{ background-color:#FC8369; }
.color-8-400{ color:#FB5A37; }
.bg-color-8-400{ background-color:#FB5A37; }
.color-8-500{ color:#E42C05; }
.bg-color-8-500{ background-color:#E42C05; }
.color-8-600{ color:#C82704; }
.bg-color-8-600{ background-color:#C82704; }
.color-8-700{ color:#961D03; }
.bg-color-8-700{ background-color:#961D03; }
.color-8-800{ color:#641302; }
.bg-color-8-800{ background-color:#641302; }
.color-8-900{ color:#320A01; }
.bg-color-8-900{ background-color:#320A01; }

.color-9-100{ color:#FFD5CC; }
.bg-color-9-100{ background-color:#FFD5CC; }
.color-9-200{ color:#FFAB99; }
.bg-color-9-200{ background-color:#FFAB99; }
.color-9-300{ color:#FF8166; }
.bg-color-9-300{ background-color:#FF8166; }
.color-9-400{ color:#FF5733; }
.bg-color-9-400{ background-color:#FF5733; }
.color-9-500{ color:#FF2D00; }
.bg-color-9-500{ background-color:#FF2D00; }
.color-9-600{ color:#E42800; }
.bg-color-9-600{ background-color:#E42800; }
.color-9-700{ color:#991B00; }
.bg-color-9-700{ background-color:#991B00; }
.color-9-800{ color:#661200; }
.bg-color-9-800{ background-color:#661200; }
.color-9-900{ color:#330900; }
.bg-color-9-900{ background-color:#330900; }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Decimal(14987429)	Decimal(14982542)	Decimal(14977655)	Decimal(14973025)	Decimal(14968138)	Decimal(14963251)	Decimal(14958364)	Decimal(14953477)	Decimal(14952448)

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(14987429)		Ratio: 1.16 Failed ⁵	Ratio: 1.35 Failed ⁵	Ratio: 1.54 Failed ⁵	Ratio: 1.77 Failed ⁵	Ratio: 1.99 Failed ⁵	Ratio: 2.20 Failed ⁵	Ratio: 2.37 Failed ⁵	Ratio: 2.40 Failed ⁵
Decimal(14982542)	Ratio: 1.16 Failed ⁵		Ratio: 1.16 Failed ⁵	Ratio: 1.33 Failed ⁵	Ratio: 1.52 Failed ⁵	Ratio: 1.71 Failed ⁵	Ratio: 1.89 Failed ⁵	Ratio: 2.04 Failed ⁵	Ratio: 2.07 Failed ⁵
Decimal(14977655)	Ratio: 1.35 Failed ⁵	Ratio: 1.16 Failed ⁵		Ratio: 1.15 Failed ⁵	Ratio: 1.31 Failed ⁵	Ratio: 1.48 Failed ⁵	Ratio: 1.63 Failed ⁵	Ratio: 1.76 Failed ⁵	Ratio: 1.78 Failed ⁵
Decimal(14973025)	Ratio: 1.54 Failed ⁵	Ratio: 1.33 Failed ⁵	Ratio: 1.15 Failed ⁵		Ratio: 1.14 Failed ⁵	Ratio: 1.29 Failed ⁵	Ratio: 1.42 Failed ⁵	Ratio: 1.54 Failed ⁵	Ratio: 1.56 Failed ⁵
Decimal(14968138)	Ratio: 1.77 Failed ⁵	Ratio: 1.52 Failed ⁵	Ratio: 1.31 Failed ⁵	Ratio: 1.14 Failed ⁵		Ratio: 1.13 Failed ⁵	Ratio: 1.25 Failed ⁵	Ratio: 1.34 Failed ⁵	Ratio: 1.36 Failed ⁵
Decimal(14963251)	Ratio: 1.99 Failed ⁵	Ratio: 1.71 Failed ⁵	Ratio: 1.48 Failed ⁵	Ratio: 1.29 Failed ⁵	Ratio: 1.13 Failed ⁵		Ratio: 1.10 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.21 Failed ⁵
Decimal(14958364)	Ratio: 2.20 Failed ⁵	Ratio: 1.89 Failed ⁵	Ratio: 1.63 Failed ⁵	Ratio: 1.42 Failed ⁵	Ratio: 1.25 Failed ⁵	Ratio: 1.10 Failed ⁵		Ratio: 1.08 Failed ⁵	Ratio: 1.09 Failed ⁵
Decimal(14953477)	Ratio: 2.37 Failed ⁵	Ratio: 2.04 Failed ⁵	Ratio: 1.76 Failed ⁵	Ratio: 1.54 Failed ⁵	Ratio: 1.34 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.08 Failed ⁵		Ratio: 1.01 Failed ⁵
Decimal(14952448)	Ratio: 2.40 Failed ⁵	Ratio: 2.07 Failed ⁵	Ratio: 1.78 Failed ⁵	Ratio: 1.56 Failed ⁵	Ratio: 1.36 Failed ⁵	Ratio: 1.21 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.01 Failed ⁵

Color Bucket