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

Main Color 2
Decimal(12116143)

Main Color 3
Decimal(10870936)

Main Color 4
Decimal(9691266)

Main Color 5
Decimal(8511595)

Main Color 6
Decimal(7331925)

Main Color 7
Decimal(6086719)

Main Color 8
Decimal(4907048)

Main Color 9
Decimal(3727378)

Main Color 10
Decimal(2744320)

Decimal(13295813)

100
Decimal(14806494)

200 * Your Color
Decimal(13295813)

300
Decimal(10799771)

400
Decimal(8829050)

500
Decimal(6792793)

600
Decimal(5473607)

700
Decimal(4088885)

800
Decimal(2703908)

900
Decimal(1384722)

Decimal(12116143)

100
Decimal(14610906)

200 * Your Color
Decimal(12116143)

300
Decimal(10343569)

400
Decimal(8242796)

500
Decimal(6076487)

600
Decimal(4887353)

700
Decimal(3632683)

800
Decimal(2443804)

900
Decimal(1189134)

Decimal(10870936)

100
Decimal(14545880)

200
Decimal(12249009)

300 * Your Color
Decimal(10870936)

400
Decimal(7786594)

500
Decimal(5555259)

600
Decimal(4431151)

700
Decimal(3307043)

800
Decimal(2182680)

900
Decimal(1124108)

Decimal(9691266)

100
Decimal(14480854)

200
Decimal(12118957)

300 * Your Color
Decimal(9691266)

400
Decimal(7525980)

500
Decimal(5164083)

600
Decimal(4170537)

700
Decimal(3111710)

800
Decimal(2052628)

900
Decimal(1059082)

Decimal(8511595)

100
Decimal(14415573)

200
Decimal(12053931)

300
Decimal(9692544)

400 * Your Color
Decimal(8511595)

500
Decimal(5034796)

600
Decimal(3975459)

700
Decimal(2981658)

800
Decimal(1987602)

900
Decimal(993801)

Decimal(7331925) middle muted chartreuse

100
Decimal(14350292)

200
Decimal(11988905)

300
Decimal(9561982)

400 * Your Color
Decimal(7331925)

500
Decimal(4773927)

600
Decimal(3845407)

700
Decimal(2851096)

800
Decimal(1922576)

900
Decimal(928520)

Decimal(6086719) dark washed green

100
Decimal(14350547)

200
Decimal(11858343)

300
Decimal(9431675)

400 * Your Color
Decimal(6086719)

500
Decimal(4578339)

600
Decimal(3649564)

700
Decimal(2720789)

800
Decimal(1792014)

900
Decimal(928775)

Decimal(4907048) dark washed green

100
Decimal(14285266)

200
Decimal(11858598)

300
Decimal(9366649)

400
Decimal(6939981)

500 * Your Color
Decimal(4907048)

600
Decimal(3584538)

700
Decimal(2655763)

800
Decimal(1792269)

900
Decimal(863494)

Decimal(3727378) dark washed green

100
Decimal(14220240)

200
Decimal(11663265)

300
Decimal(9041009)

400
Decimal(6484034)

500 * Your Color
Decimal(3727378)

600
Decimal(3128591)

700
Decimal(2330123)

800
Decimal(1596936)

900
Decimal(798468)

Decimal(2744320) dark washed green

100
Decimal(14024652)

200
Decimal(11337625)

300
Decimal(8585062)

400
Decimal(5832499)

500
Decimal(3145472)

600 * Your Color
Decimal(2744320)

700
Decimal(1874176)

800
Decimal(1271296)

900
Decimal(602880)

CSS Code

.main-color-1{ color:#CAE0C5; }
.main-bg-color-1{ background-color:#CAE0C5; }
.main-color-2{ color:#B8E0AF; }
.main-bg-color-2{ background-color:#B8E0AF; }
.main-color-3{ color:#A5E098; }
.main-bg-color-3{ background-color:#A5E098; }
.main-color-4{ color:#93E082; }
.main-bg-color-4{ background-color:#93E082; }
.main-color-5{ color:#81E06B; }
.main-bg-color-5{ background-color:#81E06B; }
.main-color-6{ color:#6FE055; }
.main-bg-color-6{ background-color:#6FE055; }
.main-color-7{ color:#5CE03F; }
.main-bg-color-7{ background-color:#5CE03F; }
.main-color-8{ color:#4AE028; }
.main-bg-color-8{ background-color:#4AE028; }
.main-color-9{ color:#38E012; }
.main-bg-color-9{ background-color:#38E012; }
.main-color-10{ color:#29E000; }
.main-bg-color-10{ background-color:#29E000; }

.color-1-100{ color:#E1EDDE; }
.bg-color-1-100{ background-color:#E1EDDE; }
.color-1-200{ color:#CAE0C5; }
.bg-color-1-200{ background-color:#CAE0C5; }
.color-1-300{ color:#A4CA9B; }
.bg-color-1-300{ background-color:#A4CA9B; }
.color-1-400{ color:#86B87A; }
.bg-color-1-400{ background-color:#86B87A; }
.color-1-500{ color:#67A659; }
.bg-color-1-500{ background-color:#67A659; }
.color-1-600{ color:#538547; }
.bg-color-1-600{ background-color:#538547; }
.color-1-700{ color:#3E6435; }
.bg-color-1-700{ background-color:#3E6435; }
.color-1-800{ color:#294224; }
.bg-color-1-800{ background-color:#294224; }
.color-1-900{ color:#152112; }
.bg-color-1-900{ background-color:#152112; }

.color-2-100{ color:#DEF1DA; }
.bg-color-2-100{ background-color:#DEF1DA; }
.color-2-200{ color:#B8E0AF; }
.bg-color-2-200{ background-color:#B8E0AF; }
.color-2-300{ color:#9DD491; }
.bg-color-2-300{ background-color:#9DD491; }
.color-2-400{ color:#7DC66C; }
.bg-color-2-400{ background-color:#7DC66C; }
.color-2-500{ color:#5CB847; }
.bg-color-2-500{ background-color:#5CB847; }
.color-2-600{ color:#4A9339; }
.bg-color-2-600{ background-color:#4A9339; }
.color-2-700{ color:#376E2B; }
.bg-color-2-700{ background-color:#376E2B; }
.color-2-800{ color:#254A1C; }
.bg-color-2-800{ background-color:#254A1C; }
.color-2-900{ color:#12250E; }
.bg-color-2-900{ background-color:#12250E; }

.color-3-100{ color:#DDF3D8; }
.bg-color-3-100{ background-color:#DDF3D8; }
.color-3-200{ color:#BAE7B1; }
.bg-color-3-200{ background-color:#BAE7B1; }
.color-3-300{ color:#A5E098; }
.bg-color-3-300{ background-color:#A5E098; }
.color-3-400{ color:#76D062; }
.bg-color-3-400{ background-color:#76D062; }
.color-3-500{ color:#54C43B; }
.bg-color-3-500{ background-color:#54C43B; }
.color-3-600{ color:#439D2F; }
.bg-color-3-600{ background-color:#439D2F; }
.color-3-700{ color:#327623; }
.bg-color-3-700{ background-color:#327623; }
.color-3-800{ color:#214E18; }
.bg-color-3-800{ background-color:#214E18; }
.color-3-900{ color:#11270C; }
.bg-color-3-900{ background-color:#11270C; }

.color-4-100{ color:#DCF5D6; }
.bg-color-4-100{ background-color:#DCF5D6; }
.color-4-200{ color:#B8EBAD; }
.bg-color-4-200{ background-color:#B8EBAD; }
.color-4-300{ color:#93E082; }
.bg-color-4-300{ background-color:#93E082; }
.color-4-400{ color:#72D65C; }
.bg-color-4-400{ background-color:#72D65C; }
.color-4-500{ color:#4ECC33; }
.bg-color-4-500{ background-color:#4ECC33; }
.color-4-600{ color:#3FA329; }
.bg-color-4-600{ background-color:#3FA329; }
.color-4-700{ color:#2F7B1E; }
.bg-color-4-700{ background-color:#2F7B1E; }
.color-4-800{ color:#1F5214; }
.bg-color-4-800{ background-color:#1F5214; }
.color-4-900{ color:#10290A; }
.bg-color-4-900{ background-color:#10290A; }

.color-5-100{ color:#DBF6D5; }
.bg-color-5-100{ background-color:#DBF6D5; }
.color-5-200{ color:#B7EDAB; }
.bg-color-5-200{ background-color:#B7EDAB; }
.color-5-300{ color:#93E580; }
.bg-color-5-300{ background-color:#93E580; }
.color-5-400{ color:#81E06B; }
.bg-color-5-400{ background-color:#81E06B; }
.color-5-500{ color:#4CD32C; }
.bg-color-5-500{ background-color:#4CD32C; }
.color-5-600{ color:#3CA923; }
.bg-color-5-600{ background-color:#3CA923; }
.color-5-700{ color:#2D7F1A; }
.bg-color-5-700{ background-color:#2D7F1A; }
.color-5-800{ color:#1E5412; }
.bg-color-5-800{ background-color:#1E5412; }
.color-5-900{ color:#0F2A09; }
.bg-color-5-900{ background-color:#0F2A09; }

.color-6-100{ color:#DAF7D4; }
.bg-color-6-100{ background-color:#DAF7D4; }
.color-6-200{ color:#B6EFA9; }
.bg-color-6-200{ background-color:#B6EFA9; }
.color-6-300{ color:#91E77E; }
.bg-color-6-300{ background-color:#91E77E; }
.color-6-400{ color:#6FE055; }
.bg-color-6-400{ background-color:#6FE055; }
.color-6-500{ color:#48D827; }
.bg-color-6-500{ background-color:#48D827; }
.color-6-600{ color:#3AAD1F; }
.bg-color-6-600{ background-color:#3AAD1F; }
.color-6-700{ color:#2B8118; }
.bg-color-6-700{ background-color:#2B8118; }
.color-6-800{ color:#1D5610; }
.bg-color-6-800{ background-color:#1D5610; }
.color-6-900{ color:#0E2B08; }
.bg-color-6-900{ background-color:#0E2B08; }

.color-7-100{ color:#DAF8D3; }
.bg-color-7-100{ background-color:#DAF8D3; }
.color-7-200{ color:#B4F1A7; }
.bg-color-7-200{ background-color:#B4F1A7; }
.color-7-300{ color:#8FEA7B; }
.bg-color-7-300{ background-color:#8FEA7B; }
.color-7-400{ color:#5CE03F; }
.bg-color-7-400{ background-color:#5CE03F; }
.color-7-500{ color:#45DC23; }
.bg-color-7-500{ background-color:#45DC23; }
.color-7-600{ color:#37B01C; }
.bg-color-7-600{ background-color:#37B01C; }
.color-7-700{ color:#298415; }
.bg-color-7-700{ background-color:#298415; }
.color-7-800{ color:#1B580E; }
.bg-color-7-800{ background-color:#1B580E; }
.color-7-900{ color:#0E2C07; }
.bg-color-7-900{ background-color:#0E2C07; }

.color-8-100{ color:#D9F9D2; }
.bg-color-8-100{ background-color:#D9F9D2; }
.color-8-200{ color:#B4F2A6; }
.bg-color-8-200{ background-color:#B4F2A6; }
.color-8-300{ color:#8EEC79; }
.bg-color-8-300{ background-color:#8EEC79; }
.color-8-400{ color:#69E54D; }
.bg-color-8-400{ background-color:#69E54D; }
.color-8-500{ color:#4AE028; }
.bg-color-8-500{ background-color:#4AE028; }
.color-8-600{ color:#36B21A; }
.bg-color-8-600{ background-color:#36B21A; }
.color-8-700{ color:#288613; }
.bg-color-8-700{ background-color:#288613; }
.color-8-800{ color:#1B590D; }
.bg-color-8-800{ background-color:#1B590D; }
.color-8-900{ color:#0D2D06; }
.bg-color-8-900{ background-color:#0D2D06; }

.color-9-100{ color:#D8FBD0; }
.bg-color-9-100{ background-color:#D8FBD0; }
.color-9-200{ color:#B1F7A1; }
.bg-color-9-200{ background-color:#B1F7A1; }
.color-9-300{ color:#89F471; }
.bg-color-9-300{ background-color:#89F471; }
.color-9-400{ color:#62F042; }
.bg-color-9-400{ background-color:#62F042; }
.color-9-500{ color:#38E012; }
.bg-color-9-500{ background-color:#38E012; }
.color-9-600{ color:#2FBD0F; }
.bg-color-9-600{ background-color:#2FBD0F; }
.color-9-700{ color:#238E0B; }
.bg-color-9-700{ background-color:#238E0B; }
.color-9-800{ color:#185E08; }
.bg-color-9-800{ background-color:#185E08; }
.color-9-900{ color:#0C2F04; }
.bg-color-9-900{ background-color:#0C2F04; }

.color-10-100{ color:#D5FFCC; }
.bg-color-10-100{ background-color:#D5FFCC; }
.color-10-200{ color:#ACFF99; }
.bg-color-10-200{ background-color:#ACFF99; }
.color-10-300{ color:#82FF66; }
.bg-color-10-300{ background-color:#82FF66; }
.color-10-400{ color:#58FF33; }
.bg-color-10-400{ background-color:#58FF33; }
.color-10-500{ color:#2FFF00; }
.bg-color-10-500{ background-color:#2FFF00; }
.color-10-600{ color:#29E000; }
.bg-color-10-600{ background-color:#29E000; }
.color-10-700{ color:#1C9900; }
.bg-color-10-700{ background-color:#1C9900; }
.color-10-800{ color:#136600; }
.bg-color-10-800{ background-color:#136600; }
.color-10-900{ color:#093300; }
.bg-color-10-900{ background-color:#093300; }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Decimal(13295813)	Decimal(12116143)	Decimal(10870936)	Decimal(9691266)	Decimal(8511595)	Decimal(7331925)	Decimal(6086719)	Decimal(4907048)	Decimal(3727378)	Decimal(2744320)

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(13295813)		Ratio: 1.05 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.13 Failed ⁵	Ratio: 1.17 Failed ⁵	Ratio: 1.20 Failed ⁵	Ratio: 1.23 Failed ⁵	Ratio: 1.25 Failed ⁵	Ratio: 1.27 Failed ⁵	Ratio: 1.27 Failed ⁵
Decimal(12116143)	Ratio: 1.05 Failed ⁵		Ratio: 1.04 Failed ⁵	Ratio: 1.08 Failed ⁵	Ratio: 1.12 Failed ⁵	Ratio: 1.15 Failed ⁵	Ratio: 1.17 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.21 Failed ⁵	Ratio: 1.22 Failed ⁵
Decimal(10870936)	Ratio: 1.09 Failed ⁵	Ratio: 1.04 Failed ⁵		Ratio: 1.04 Failed ⁵	Ratio: 1.07 Failed ⁵	Ratio: 1.10 Failed ⁵	Ratio: 1.13 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.16 Failed ⁵	Ratio: 1.17 Failed ⁵
Decimal(9691266)	Ratio: 1.13 Failed ⁵	Ratio: 1.08 Failed ⁵	Ratio: 1.04 Failed ⁵		Ratio: 1.03 Failed ⁵	Ratio: 1.06 Failed ⁵	Ratio: 1.08 Failed ⁵	Ratio: 1.10 Failed ⁵	Ratio: 1.12 Failed ⁵	Ratio: 1.12 Failed ⁵
Decimal(8511595)	Ratio: 1.17 Failed ⁵	Ratio: 1.12 Failed ⁵	Ratio: 1.07 Failed ⁵	Ratio: 1.03 Failed ⁵		Ratio: 1.03 Failed ⁵	Ratio: 1.05 Failed ⁵	Ratio: 1.07 Failed ⁵	Ratio: 1.08 Failed ⁵	Ratio: 1.09 Failed ⁵
Decimal(7331925)	Ratio: 1.20 Failed ⁵	Ratio: 1.15 Failed ⁵	Ratio: 1.10 Failed ⁵	Ratio: 1.06 Failed ⁵	Ratio: 1.03 Failed ⁵		Ratio: 1.02 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.05 Failed ⁵	Ratio: 1.06 Failed ⁵
Decimal(6086719)	Ratio: 1.23 Failed ⁵	Ratio: 1.17 Failed ⁵	Ratio: 1.13 Failed ⁵	Ratio: 1.08 Failed ⁵	Ratio: 1.05 Failed ⁵	Ratio: 1.02 Failed ⁵		Ratio: 1.02 Failed ⁵	Ratio: 1.03 Failed ⁵	Ratio: 1.04 Failed ⁵
Decimal(4907048)	Ratio: 1.25 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.10 Failed ⁵	Ratio: 1.07 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.02 Failed ⁵		Ratio: 1.01 Failed ⁵	Ratio: 1.02 Failed ⁵
Decimal(3727378)	Ratio: 1.27 Failed ⁵	Ratio: 1.21 Failed ⁵	Ratio: 1.16 Failed ⁵	Ratio: 1.12 Failed ⁵	Ratio: 1.08 Failed ⁵	Ratio: 1.05 Failed ⁵	Ratio: 1.03 Failed ⁵	Ratio: 1.01 Failed ⁵		Ratio: 1.01 Failed ⁵
Decimal(2744320)	Ratio: 1.27 Failed ⁵	Ratio: 1.22 Failed ⁵	Ratio: 1.17 Failed ⁵	Ratio: 1.12 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.06 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.01 Failed ⁵

Color Bucket