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

Main Color 2
Decimal(7638125)

Main Color 3
Decimal(6982751)

Main Color 4
Decimal(6261841)

Main Color 5
Decimal(5540931)

Main Color 6
Decimal(4820021)

Main Color 7
Decimal(4164647)

Main Color 8
Decimal(3443737)

Main Color 9
Decimal(2722827)

Main Color 10
Decimal(2198528)

Decimal(8359035)

100
Decimal(15067108)

200
Decimal(13291720)

300
Decimal(11581613)

400
Decimal(9805970)

500 * Your Color
Decimal(8359035)

600
Decimal(6450527)

700
Decimal(4870727)

800
Decimal(3225391)

900
Decimal(1645336)

Decimal(7638125)

100
Decimal(15002082)

200
Decimal(13226694)

300
Decimal(11386025)

400
Decimal(9610892)

500 * Your Color
Decimal(7638125)

600
Decimal(6255449)

700
Decimal(4675139)

800
Decimal(3160365)

900
Decimal(1580310)

Decimal(6982751)

100
Decimal(14936801)

200
Decimal(13096642)

300
Decimal(11256228)

400
Decimal(9416069)

500 * Your Color
Decimal(6982751)

600
Decimal(6060626)

700
Decimal(4545342)

800
Decimal(3030313)

900
Decimal(1515029)

Decimal(6261841)

100
Decimal(14871775)

200
Decimal(12966590)

300
Decimal(11061150)

400
Decimal(9155710)

500
Decimal(7250525)

600 * Your Color
Decimal(6261841)

700
Decimal(4350264)

800
Decimal(2900261)

900
Decimal(1450003)

Decimal(5540931)

100
Decimal(14806749)

200
Decimal(12771002)

300
Decimal(10800536)

400
Decimal(8830325)

500
Decimal(6794323)

600 * Your Color
Decimal(5540931)

700
Decimal(4089650)

800
Decimal(2704673)

900
Decimal(1384977)

Decimal(4820021)

100
Decimal(14676442)

200
Decimal(12641205)

300
Decimal(10540432)

400
Decimal(8439659)

500
Decimal(6338886)

600 * Your Color
Decimal(4820021)

700
Decimal(3829546)

800
Decimal(2574876)

900
Decimal(1254670)

Decimal(4164647)

100
Decimal(14611671)

200
Decimal(12446127)

300
Decimal(10280583)

400
Decimal(8115039)

500
Decimal(5949240)

600 * Your Color
Decimal(4164647)

700
Decimal(3569697)

800
Decimal(2379798)

900
Decimal(1189899)

Decimal(3443737)

100
Decimal(14481364)

200
Decimal(12185768)

300
Decimal(9889917)

400
Decimal(7594066)

500
Decimal(5298215)

600
Decimal(4238623)

700 * Your Color
Decimal(3443737)

800
Decimal(2119439)

900
Decimal(1059592)

Decimal(2722827)

100
Decimal(14351312)

200
Decimal(11925664)

300
Decimal(9499761)

400
Decimal(7008322)

500
Decimal(4582419)

600
Decimal(3652879)

700 * Your Color
Decimal(2722827)

800
Decimal(1859335)

900
Decimal(929540)

Decimal(2198528)

100
Decimal(14221260)

200
Decimal(11665305)

300
Decimal(9109350)

400
Decimal(6553395)

500
Decimal(3997440)

600
Decimal(3197952)

700 * Your Color
Decimal(2198528)

800
Decimal(1598976)

900
Decimal(799488)

CSS Code

.main-color-1{ color:#7F8C7B; }
.main-bg-color-1{ background-color:#7F8C7B; }
.main-color-2{ color:#748C6D; }
.main-bg-color-2{ background-color:#748C6D; }
.main-color-3{ color:#6A8C5F; }
.main-bg-color-3{ background-color:#6A8C5F; }
.main-color-4{ color:#5F8C51; }
.main-bg-color-4{ background-color:#5F8C51; }
.main-color-5{ color:#548C43; }
.main-bg-color-5{ background-color:#548C43; }
.main-color-6{ color:#498C35; }
.main-bg-color-6{ background-color:#498C35; }
.main-color-7{ color:#3F8C27; }
.main-bg-color-7{ background-color:#3F8C27; }
.main-color-8{ color:#348C19; }
.main-bg-color-8{ background-color:#348C19; }
.main-color-9{ color:#298C0B; }
.main-bg-color-9{ background-color:#298C0B; }
.main-color-10{ color:#218C00; }
.main-bg-color-10{ background-color:#218C00; }

.color-1-100{ color:#E5E7E4; }
.bg-color-1-100{ background-color:#E5E7E4; }
.color-1-200{ color:#CAD0C8; }
.bg-color-1-200{ background-color:#CAD0C8; }
.color-1-300{ color:#B0B8AD; }
.bg-color-1-300{ background-color:#B0B8AD; }
.color-1-400{ color:#95A092; }
.bg-color-1-400{ background-color:#95A092; }
.color-1-500{ color:#7F8C7B; }
.bg-color-1-500{ background-color:#7F8C7B; }
.color-1-600{ color:#626D5F; }
.bg-color-1-600{ background-color:#626D5F; }
.color-1-700{ color:#4A5247; }
.bg-color-1-700{ background-color:#4A5247; }
.color-1-800{ color:#31372F; }
.bg-color-1-800{ background-color:#31372F; }
.color-1-900{ color:#191B18; }
.bg-color-1-900{ background-color:#191B18; }

.color-2-100{ color:#E4E9E2; }
.bg-color-2-100{ background-color:#E4E9E2; }
.color-2-200{ color:#C9D2C6; }
.bg-color-2-200{ background-color:#C9D2C6; }
.color-2-300{ color:#ADBCA9; }
.bg-color-2-300{ background-color:#ADBCA9; }
.color-2-400{ color:#92A68C; }
.bg-color-2-400{ background-color:#92A68C; }
.color-2-500{ color:#748C6D; }
.bg-color-2-500{ background-color:#748C6D; }
.color-2-600{ color:#5F7359; }
.bg-color-2-600{ background-color:#5F7359; }
.color-2-700{ color:#475643; }
.bg-color-2-700{ background-color:#475643; }
.color-2-800{ color:#30392D; }
.bg-color-2-800{ background-color:#30392D; }
.color-2-900{ color:#181D16; }
.bg-color-2-900{ background-color:#181D16; }

.color-3-100{ color:#E3EAE1; }
.bg-color-3-100{ background-color:#E3EAE1; }
.color-3-200{ color:#C7D6C2; }
.bg-color-3-200{ background-color:#C7D6C2; }
.color-3-300{ color:#ABC1A4; }
.bg-color-3-300{ background-color:#ABC1A4; }
.color-3-400{ color:#8FAD85; }
.bg-color-3-400{ background-color:#8FAD85; }
.color-3-500{ color:#6A8C5F; }
.bg-color-3-500{ background-color:#6A8C5F; }
.color-3-600{ color:#5C7A52; }
.bg-color-3-600{ background-color:#5C7A52; }
.color-3-700{ color:#455B3E; }
.bg-color-3-700{ background-color:#455B3E; }
.color-3-800{ color:#2E3D29; }
.bg-color-3-800{ background-color:#2E3D29; }
.color-3-900{ color:#171E15; }
.bg-color-3-900{ background-color:#171E15; }

.color-4-100{ color:#E2ECDF; }
.bg-color-4-100{ background-color:#E2ECDF; }
.color-4-200{ color:#C5DABE; }
.bg-color-4-200{ background-color:#C5DABE; }
.color-4-300{ color:#A8C79E; }
.bg-color-4-300{ background-color:#A8C79E; }
.color-4-400{ color:#8BB47E; }
.bg-color-4-400{ background-color:#8BB47E; }
.color-4-500{ color:#6EA25D; }
.bg-color-4-500{ background-color:#6EA25D; }
.color-4-600{ color:#5F8C51; }
.bg-color-4-600{ background-color:#5F8C51; }
.color-4-700{ color:#426138; }
.bg-color-4-700{ background-color:#426138; }
.color-4-800{ color:#2C4125; }
.bg-color-4-800{ background-color:#2C4125; }
.color-4-900{ color:#162013; }
.bg-color-4-900{ background-color:#162013; }

.color-5-100{ color:#E1EEDD; }
.bg-color-5-100{ background-color:#E1EEDD; }
.color-5-200{ color:#C2DEBA; }
.bg-color-5-200{ background-color:#C2DEBA; }
.color-5-300{ color:#A4CD98; }
.bg-color-5-300{ background-color:#A4CD98; }
.color-5-400{ color:#86BD75; }
.bg-color-5-400{ background-color:#86BD75; }
.color-5-500{ color:#67AC53; }
.bg-color-5-500{ background-color:#67AC53; }
.color-5-600{ color:#548C43; }
.bg-color-5-600{ background-color:#548C43; }
.color-5-700{ color:#3E6732; }
.bg-color-5-700{ background-color:#3E6732; }
.color-5-800{ color:#294521; }
.bg-color-5-800{ background-color:#294521; }
.color-5-900{ color:#152211; }
.bg-color-5-900{ background-color:#152211; }

.color-6-100{ color:#DFF1DA; }
.bg-color-6-100{ background-color:#DFF1DA; }
.color-6-200{ color:#C0E3B5; }
.bg-color-6-200{ background-color:#C0E3B5; }
.color-6-300{ color:#A0D590; }
.bg-color-6-300{ background-color:#A0D590; }
.color-6-400{ color:#80C76B; }
.bg-color-6-400{ background-color:#80C76B; }
.color-6-500{ color:#60B946; }
.bg-color-6-500{ background-color:#60B946; }
.color-6-600{ color:#498C35; }
.bg-color-6-600{ background-color:#498C35; }
.color-6-700{ color:#3A6F2A; }
.bg-color-6-700{ background-color:#3A6F2A; }
.color-6-800{ color:#274A1C; }
.bg-color-6-800{ background-color:#274A1C; }
.color-6-900{ color:#13250E; }
.bg-color-6-900{ background-color:#13250E; }

.color-7-100{ color:#DEF4D7; }
.bg-color-7-100{ background-color:#DEF4D7; }
.color-7-200{ color:#BDE9AF; }
.bg-color-7-200{ background-color:#BDE9AF; }
.color-7-300{ color:#9CDE87; }
.bg-color-7-300{ background-color:#9CDE87; }
.color-7-400{ color:#7BD35F; }
.bg-color-7-400{ background-color:#7BD35F; }
.color-7-500{ color:#5AC738; }
.bg-color-7-500{ background-color:#5AC738; }
.color-7-600{ color:#3F8C27; }
.bg-color-7-600{ background-color:#3F8C27; }
.color-7-700{ color:#367821; }
.bg-color-7-700{ background-color:#367821; }
.color-7-800{ color:#245016; }
.bg-color-7-800{ background-color:#245016; }
.color-7-900{ color:#12280B; }
.bg-color-7-900{ background-color:#12280B; }

.color-8-100{ color:#DCF7D4; }
.bg-color-8-100{ background-color:#DCF7D4; }
.color-8-200{ color:#B9F0A8; }
.bg-color-8-200{ background-color:#B9F0A8; }
.color-8-300{ color:#96E87D; }
.bg-color-8-300{ background-color:#96E87D; }
.color-8-400{ color:#73E052; }
.bg-color-8-400{ background-color:#73E052; }
.color-8-500{ color:#50D827; }
.bg-color-8-500{ background-color:#50D827; }
.color-8-600{ color:#40AD1F; }
.bg-color-8-600{ background-color:#40AD1F; }
.color-8-700{ color:#348C19; }
.bg-color-8-700{ background-color:#348C19; }
.color-8-800{ color:#20570F; }
.bg-color-8-800{ background-color:#20570F; }
.color-8-900{ color:#102B08; }
.bg-color-8-900{ background-color:#102B08; }

.color-9-100{ color:#DAFBD0; }
.bg-color-9-100{ background-color:#DAFBD0; }
.color-9-200{ color:#B5F8A0; }
.bg-color-9-200{ background-color:#B5F8A0; }
.color-9-300{ color:#90F471; }
.bg-color-9-300{ background-color:#90F471; }
.color-9-400{ color:#6AF042; }
.bg-color-9-400{ background-color:#6AF042; }
.color-9-500{ color:#45EC13; }
.bg-color-9-500{ background-color:#45EC13; }
.color-9-600{ color:#37BD0F; }
.bg-color-9-600{ background-color:#37BD0F; }
.color-9-700{ color:#298C0B; }
.bg-color-9-700{ background-color:#298C0B; }
.color-9-800{ color:#1C5F07; }
.bg-color-9-800{ background-color:#1C5F07; }
.color-9-900{ color:#0E2F04; }
.bg-color-9-900{ background-color:#0E2F04; }

.color-10-100{ color:#D8FFCC; }
.bg-color-10-100{ background-color:#D8FFCC; }
.color-10-200{ color:#B1FF99; }
.bg-color-10-200{ background-color:#B1FF99; }
.color-10-300{ color:#8AFF66; }
.bg-color-10-300{ background-color:#8AFF66; }
.color-10-400{ color:#63FF33; }
.bg-color-10-400{ background-color:#63FF33; }
.color-10-500{ color:#3CFF00; }
.bg-color-10-500{ background-color:#3CFF00; }
.color-10-600{ color:#30CC00; }
.bg-color-10-600{ background-color:#30CC00; }
.color-10-700{ color:#218C00; }
.bg-color-10-700{ background-color:#218C00; }
.color-10-800{ color:#186600; }
.bg-color-10-800{ background-color:#186600; }
.color-10-900{ color:#0C3300; }
.bg-color-10-900{ background-color:#0C3300; }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Decimal(8359035)	Decimal(7638125)	Decimal(6982751)	Decimal(6261841)	Decimal(5540931)	Decimal(4820021)	Decimal(4164647)	Decimal(3443737)	Decimal(2722827)	Decimal(2198528)

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(8359035)		Ratio: 1.04 Failed ⁵	Ratio: 1.07 Failed ⁵	Ratio: 1.11 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.17 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.21 Failed ⁵	Ratio: 1.22 Failed ⁵	Ratio: 1.23 Failed ⁵
Decimal(7638125)	Ratio: 1.04 Failed ⁵		Ratio: 1.03 Failed ⁵	Ratio: 1.07 Failed ⁵	Ratio: 1.10 Failed ⁵	Ratio: 1.12 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.16 Failed ⁵	Ratio: 1.18 Failed ⁵	Ratio: 1.19 Failed ⁵
Decimal(6982751)	Ratio: 1.07 Failed ⁵	Ratio: 1.03 Failed ⁵		Ratio: 1.03 Failed ⁵	Ratio: 1.06 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.11 Failed ⁵	Ratio: 1.13 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.15 Failed ⁵
Decimal(6261841)	Ratio: 1.11 Failed ⁵	Ratio: 1.07 Failed ⁵	Ratio: 1.03 Failed ⁵		Ratio: 1.03 Failed ⁵	Ratio: 1.05 Failed ⁵	Ratio: 1.07 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.10 Failed ⁵	Ratio: 1.11 Failed ⁵
Decimal(5540931)	Ratio: 1.14 Failed ⁵	Ratio: 1.10 Failed ⁵	Ratio: 1.06 Failed ⁵	Ratio: 1.03 Failed ⁵		Ratio: 1.02 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.06 Failed ⁵	Ratio: 1.07 Failed ⁵	Ratio: 1.08 Failed ⁵
Decimal(4820021)	Ratio: 1.17 Failed ⁵	Ratio: 1.12 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.05 Failed ⁵	Ratio: 1.02 Failed ⁵		Ratio: 1.02 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.05 Failed ⁵	Ratio: 1.06 Failed ⁵
Decimal(4164647)	Ratio: 1.19 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.11 Failed ⁵	Ratio: 1.07 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.02 Failed ⁵		Ratio: 1.02 Failed ⁵	Ratio: 1.03 Failed ⁵	Ratio: 1.04 Failed ⁵
Decimal(3443737)	Ratio: 1.21 Failed ⁵	Ratio: 1.16 Failed ⁵	Ratio: 1.13 Failed ⁵	Ratio: 1.09 Failed ⁵	Ratio: 1.06 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.02 Failed ⁵		Ratio: 1.01 Failed ⁵	Ratio: 1.02 Failed ⁵
Decimal(2722827)	Ratio: 1.22 Failed ⁵	Ratio: 1.18 Failed ⁵	Ratio: 1.14 Failed ⁵	Ratio: 1.10 Failed ⁵	Ratio: 1.07 Failed ⁵	Ratio: 1.05 Failed ⁵	Ratio: 1.03 Failed ⁵	Ratio: 1.01 Failed ⁵		Ratio: 1.01 Failed ⁵
Decimal(2198528)	Ratio: 1.23 Failed ⁵	Ratio: 1.19 Failed ⁵	Ratio: 1.15 Failed ⁵	Ratio: 1.11 Failed ⁵	Ratio: 1.08 Failed ⁵	Ratio: 1.06 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.01 Failed ⁵

Color Bucket