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

Main Color 2
Decimal(990723)

Main Color 3
Decimal(1056262)

Main Color 4
Decimal(1187337)

Main Color 5
Decimal(1318412)

Main Color 6
Decimal(1383951)

Main Color 7
Decimal(1515026)

Main Color 8
Decimal(1646101)

Main Color 9
Decimal(1777176)

Main Color 10
Decimal(1842715)

Decimal(859648)

100
Decimal(14876620)

200
Decimal(12976025)

300
Decimal(11075430)

400
Decimal(9174835)

500
Decimal(7274240)

600
Decimal(5819392)

700
Decimal(4364544)

800
Decimal(2909696)

900 * Your Color
Decimal(859648)

Decimal(990723)

100
Decimal(14940881)

200
Decimal(13104802)

300
Decimal(11334004)

400
Decimal(9497670)

500
Decimal(7661591)

600
Decimal(6142227)

700
Decimal(4623118)

800
Decimal(3038473)

900 * Your Color
Decimal(990723)

Decimal(1056262)

100
Decimal(14939861)

200
Decimal(13037226)

300
Decimal(11199872)

400
Decimal(9362773)

500
Decimal(7459883)

600
Decimal(6007330)

700
Decimal(4488986)

800
Decimal(2970897)

900 * Your Color
Decimal(1056262)

Decimal(1187337)

100
Decimal(15004632)

200
Decimal(13166513)

300
Decimal(11394185)

400
Decimal(9556066)

500
Decimal(7783483)

600
Decimal(6200623)

700
Decimal(4683299)

800
Decimal(3100184)

900 * Your Color
Decimal(1187337)

Decimal(1318412)

100
Decimal(15003867)

200
Decimal(13296310)

300
Decimal(11522962)

400
Decimal(9749869)

500
Decimal(7976521)

600
Decimal(6394426)

700
Decimal(4812076)

800
Decimal(3229981)

900 * Your Color
Decimal(1318412)

Decimal(1383951)

100
Decimal(15003357)

200
Decimal(13229499)

300
Decimal(11390105)

400
Decimal(9616247)

500
Decimal(7842389)

600
Decimal(6260804)

700
Decimal(4679219)

800
Decimal(3163170)

900 * Your Color
Decimal(1383951)

Decimal(1515026)

100
Decimal(15002847)

200
Decimal(13294015)

300
Decimal(11519647)

400
Decimal(9810816)

500
Decimal(8036192)

600
Decimal(6455373)

700
Decimal(4808761)

800
Decimal(3227686)

900 * Your Color
Decimal(1515026)

Decimal(1646101)

100
Decimal(15067873)

200
Decimal(13358531)

300
Decimal(11649189)

400
Decimal(9939847)

500
Decimal(8230505)

600
Decimal(6584404)

700
Decimal(4938303)

800
Decimal(3292202)

900 * Your Color
Decimal(1646101)

Decimal(1777176)

100
Decimal(15132899)

200
Decimal(13423302)

300
Decimal(11778986)

400
Decimal(10069134)

500
Decimal(8425073)

600
Decimal(6713691)

700
Decimal(5068100)

800
Decimal(3356973)

900 * Your Color
Decimal(1777176)

Decimal(1842715)

100
Decimal(15067108)

200
Decimal(13357001)

300
Decimal(11646894)

400
Decimal(9936532)

500
Decimal(8226425)

600
Decimal(6581089)

700
Decimal(4936008)

800
Decimal(3290672)

900 * Your Color
Decimal(1842715)

CSS Code

.main-color-1{ color:#0D1E00; }
.main-bg-color-1{ background-color:#0D1E00; }
.main-color-2{ color:#0F1E03; }
.main-bg-color-2{ background-color:#0F1E03; }
.main-color-3{ color:#101E06; }
.main-bg-color-3{ background-color:#101E06; }
.main-color-4{ color:#121E09; }
.main-bg-color-4{ background-color:#121E09; }
.main-color-5{ color:#141E0C; }
.main-bg-color-5{ background-color:#141E0C; }
.main-color-6{ color:#151E0F; }
.main-bg-color-6{ background-color:#151E0F; }
.main-color-7{ color:#171E12; }
.main-bg-color-7{ background-color:#171E12; }
.main-color-8{ color:#191E15; }
.main-bg-color-8{ background-color:#191E15; }
.main-color-9{ color:#1B1E18; }
.main-bg-color-9{ background-color:#1B1E18; }
.main-color-10{ color:#1C1E1B; }
.main-bg-color-10{ background-color:#1C1E1B; }

.color-1-100{ color:#E2FFCC; }
.bg-color-1-100{ background-color:#E2FFCC; }
.color-1-200{ color:#C5FF99; }
.bg-color-1-200{ background-color:#C5FF99; }
.color-1-300{ color:#A8FF66; }
.bg-color-1-300{ background-color:#A8FF66; }
.color-1-400{ color:#8BFF33; }
.bg-color-1-400{ background-color:#8BFF33; }
.color-1-500{ color:#6EFF00; }
.bg-color-1-500{ background-color:#6EFF00; }
.color-1-600{ color:#58CC00; }
.bg-color-1-600{ background-color:#58CC00; }
.color-1-700{ color:#429900; }
.bg-color-1-700{ background-color:#429900; }
.color-1-800{ color:#2C6600; }
.bg-color-1-800{ background-color:#2C6600; }
.color-1-900{ color:#0D1E00; }
.bg-color-1-900{ background-color:#0D1E00; }

.color-2-100{ color:#E3FAD1; }
.bg-color-2-100{ background-color:#E3FAD1; }
.color-2-200{ color:#C7F6A2; }
.bg-color-2-200{ background-color:#C7F6A2; }
.color-2-300{ color:#ACF174; }
.bg-color-2-300{ background-color:#ACF174; }
.color-2-400{ color:#90EC46; }
.bg-color-2-400{ background-color:#90EC46; }
.color-2-500{ color:#74E817; }
.bg-color-2-500{ background-color:#74E817; }
.color-2-600{ color:#5DB913; }
.bg-color-2-600{ background-color:#5DB913; }
.color-2-700{ color:#468B0E; }
.bg-color-2-700{ background-color:#468B0E; }
.color-2-800{ color:#2E5D09; }
.bg-color-2-800{ background-color:#2E5D09; }
.color-2-900{ color:#0F1E03; }
.bg-color-2-900{ background-color:#0F1E03; }

.color-3-100{ color:#E3F6D5; }
.bg-color-3-100{ background-color:#E3F6D5; }
.color-3-200{ color:#C6EEAA; }
.bg-color-3-200{ background-color:#C6EEAA; }
.color-3-300{ color:#AAE580; }
.bg-color-3-300{ background-color:#AAE580; }
.color-3-400{ color:#8EDD55; }
.bg-color-3-400{ background-color:#8EDD55; }
.color-3-500{ color:#71D42B; }
.bg-color-3-500{ background-color:#71D42B; }
.color-3-600{ color:#5BAA22; }
.bg-color-3-600{ background-color:#5BAA22; }
.color-3-700{ color:#447F1A; }
.bg-color-3-700{ background-color:#447F1A; }
.color-3-800{ color:#2D5511; }
.bg-color-3-800{ background-color:#2D5511; }
.color-3-900{ color:#101E06; }
.bg-color-3-900{ background-color:#101E06; }

.color-4-100{ color:#E4F3D8; }
.bg-color-4-100{ background-color:#E4F3D8; }
.color-4-200{ color:#C8E7B1; }
.bg-color-4-200{ background-color:#C8E7B1; }
.color-4-300{ color:#ADDC89; }
.bg-color-4-300{ background-color:#ADDC89; }
.color-4-400{ color:#91D062; }
.bg-color-4-400{ background-color:#91D062; }
.color-4-500{ color:#76C43B; }
.bg-color-4-500{ background-color:#76C43B; }
.color-4-600{ color:#5E9D2F; }
.bg-color-4-600{ background-color:#5E9D2F; }
.color-4-700{ color:#477623; }
.bg-color-4-700{ background-color:#477623; }
.color-4-800{ color:#2F4E18; }
.bg-color-4-800{ background-color:#2F4E18; }
.color-4-900{ color:#121E09; }
.bg-color-4-900{ background-color:#121E09; }

.color-5-100{ color:#E4F0DB; }
.bg-color-5-100{ background-color:#E4F0DB; }
.color-5-200{ color:#CAE2B6; }
.bg-color-5-200{ background-color:#CAE2B6; }
.color-5-300{ color:#AFD392; }
.bg-color-5-300{ background-color:#AFD392; }
.color-5-400{ color:#94C56D; }
.bg-color-5-400{ background-color:#94C56D; }
.color-5-500{ color:#79B649; }
.bg-color-5-500{ background-color:#79B649; }
.color-5-600{ color:#61923A; }
.bg-color-5-600{ background-color:#61923A; }
.color-5-700{ color:#496D2C; }
.bg-color-5-700{ background-color:#496D2C; }
.color-5-800{ color:#31491D; }
.bg-color-5-800{ background-color:#31491D; }
.color-5-900{ color:#141E0C; }
.bg-color-5-900{ background-color:#141E0C; }

.color-6-100{ color:#E4EEDD; }
.bg-color-6-100{ background-color:#E4EEDD; }
.color-6-200{ color:#C9DDBB; }
.bg-color-6-200{ background-color:#C9DDBB; }
.color-6-300{ color:#ADCC99; }
.bg-color-6-300{ background-color:#ADCC99; }
.color-6-400{ color:#92BB77; }
.bg-color-6-400{ background-color:#92BB77; }
.color-6-500{ color:#77AA55; }
.bg-color-6-500{ background-color:#77AA55; }
.color-6-600{ color:#5F8844; }
.bg-color-6-600{ background-color:#5F8844; }
.color-6-700{ color:#476633; }
.bg-color-6-700{ background-color:#476633; }
.color-6-800{ color:#304422; }
.bg-color-6-800{ background-color:#304422; }
.color-6-900{ color:#151E0F; }
.bg-color-6-900{ background-color:#151E0F; }

.color-7-100{ color:#E4ECDF; }
.bg-color-7-100{ background-color:#E4ECDF; }
.color-7-200{ color:#CAD9BF; }
.bg-color-7-200{ background-color:#CAD9BF; }
.color-7-300{ color:#AFC69F; }
.bg-color-7-300{ background-color:#AFC69F; }
.color-7-400{ color:#95B380; }
.bg-color-7-400{ background-color:#95B380; }
.color-7-500{ color:#7A9F60; }
.bg-color-7-500{ background-color:#7A9F60; }
.color-7-600{ color:#62804D; }
.bg-color-7-600{ background-color:#62804D; }
.color-7-700{ color:#496039; }
.bg-color-7-700{ background-color:#496039; }
.color-7-800{ color:#314026; }
.bg-color-7-800{ background-color:#314026; }
.color-7-900{ color:#171E12; }
.bg-color-7-900{ background-color:#171E12; }

.color-8-100{ color:#E5EAE1; }
.bg-color-8-100{ background-color:#E5EAE1; }
.color-8-200{ color:#CBD5C3; }
.bg-color-8-200{ background-color:#CBD5C3; }
.color-8-300{ color:#B1C0A5; }
.bg-color-8-300{ background-color:#B1C0A5; }
.color-8-400{ color:#97AB87; }
.bg-color-8-400{ background-color:#97AB87; }
.color-8-500{ color:#7D9669; }
.bg-color-8-500{ background-color:#7D9669; }
.color-8-600{ color:#647854; }
.bg-color-8-600{ background-color:#647854; }
.color-8-700{ color:#4B5A3F; }
.bg-color-8-700{ background-color:#4B5A3F; }
.color-8-800{ color:#323C2A; }
.bg-color-8-800{ background-color:#323C2A; }
.color-8-900{ color:#191E15; }
.bg-color-8-900{ background-color:#191E15; }

.color-9-100{ color:#E6E8E3; }
.bg-color-9-100{ background-color:#E6E8E3; }
.color-9-200{ color:#CCD2C6; }
.bg-color-9-200{ background-color:#CCD2C6; }
.color-9-300{ color:#B3BBAA; }
.bg-color-9-300{ background-color:#B3BBAA; }
.color-9-400{ color:#99A48E; }
.bg-color-9-400{ background-color:#99A48E; }
.color-9-500{ color:#808E71; }
.bg-color-9-500{ background-color:#808E71; }
.color-9-600{ color:#66715B; }
.bg-color-9-600{ background-color:#66715B; }
.color-9-700{ color:#4D5544; }
.bg-color-9-700{ background-color:#4D5544; }
.color-9-800{ color:#33392D; }
.bg-color-9-800{ background-color:#33392D; }
.color-9-900{ color:#1B1E18; }
.bg-color-9-900{ background-color:#1B1E18; }

.color-10-100{ color:#E5E7E4; }
.bg-color-10-100{ background-color:#E5E7E4; }
.color-10-200{ color:#CBCFC9; }
.bg-color-10-200{ background-color:#CBCFC9; }
.color-10-300{ color:#B1B7AE; }
.bg-color-10-300{ background-color:#B1B7AE; }
.color-10-400{ color:#979E94; }
.bg-color-10-400{ background-color:#979E94; }
.color-10-500{ color:#7D8679; }
.bg-color-10-500{ background-color:#7D8679; }
.color-10-600{ color:#646B61; }
.bg-color-10-600{ background-color:#646B61; }
.color-10-700{ color:#4B5148; }
.bg-color-10-700{ background-color:#4B5148; }
.color-10-800{ color:#323630; }
.bg-color-10-800{ background-color:#323630; }
.color-10-900{ color:#1C1E1B; }
.bg-color-10-900{ background-color:#1C1E1B; }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Decimal(859648)	Decimal(990723)	Decimal(1056262)	Decimal(1187337)	Decimal(1318412)	Decimal(1383951)	Decimal(1515026)	Decimal(1646101)	Decimal(1777176)	Decimal(1842715)

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(859648)		Ratio: 1.00 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.03 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.04 Failed ⁵
Decimal(990723)	Ratio: 1.00 Failed ⁵		Ratio: 1.00 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.03 Failed ⁵	Ratio: 1.03 Failed ⁵	Ratio: 1.04 Failed ⁵
Decimal(1056262)	Ratio: 1.01 Failed ⁵	Ratio: 1.00 Failed ⁵		Ratio: 1.00 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.03 Failed ⁵	Ratio: 1.03 Failed ⁵
Decimal(1187337)	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.00 Failed ⁵		Ratio: 1.00 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.03 Failed ⁵
Decimal(1318412)	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.00 Failed ⁵		Ratio: 1.00 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.02 Failed ⁵
Decimal(1383951)	Ratio: 1.02 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.00 Failed ⁵		Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.02 Failed ⁵
Decimal(1515026)	Ratio: 1.02 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵		Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.02 Failed ⁵
Decimal(1646101)	Ratio: 1.03 Failed ⁵	Ratio: 1.03 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵		Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵
Decimal(1777176)	Ratio: 1.04 Failed ⁵	Ratio: 1.03 Failed ⁵	Ratio: 1.03 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.01 Failed ⁵		Ratio: 1.00 Failed ⁵
Decimal(1842715)	Ratio: 1.04 Failed ⁵	Ratio: 1.04 Failed ⁵	Ratio: 1.03 Failed ⁵	Ratio: 1.03 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.02 Failed ⁵	Ratio: 1.01 Failed ⁵	Ratio: 1.00 Failed ⁵

Color Bucket