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

Main Color 2
Decimal(3872747)

Main Color 3
Decimal(5124075)

Main Color 4
Decimal(6440939)

Main Color 5
Decimal(7692011)

Main Color 6
Decimal(9008875)

Main Color 7
Decimal(10325483)

Main Color 8
Decimal(11576555)

Main Color 9
Decimal(12893419)

Main Color 10
Decimal(14144491)

Decimal(2556139) dark washed blue

100
Decimal(13946111)

200
Decimal(11180543)

300
Decimal(8349439)

400
Decimal(5583871)

500 * Your Color
Decimal(2556139)

600
Decimal(2228428)

700
Decimal(1638553)

800
Decimal(1114214)

900
Decimal(524339)

Decimal(3872747) dark washed blue

100
Decimal(14143739)

200
Decimal(11575799)

300
Decimal(8942323)

400
Decimal(6308847)

500 * Your Color
Decimal(3872747)

600
Decimal(2953404)

700
Decimal(2231437)

800
Decimal(1509470)

900
Decimal(721967)

Decimal(5124075) dark washed blue

100
Decimal(14143739)

200
Decimal(11576054)

300
Decimal(8942578)

400 * Your Color
Decimal(5124075)

500
Decimal(3741417)

600
Decimal(3019450)

700
Decimal(2231692)

800
Decimal(1509725)

900
Decimal(721967)

Decimal(6440939) middle muted purple

100
Decimal(14209530)

200
Decimal(11641845)

300
Decimal(9008624)

400 * Your Color
Decimal(6440939)

500
Decimal(3873254)

600
Decimal(3085496)

700
Decimal(2297738)

800
Decimal(1575516)

900
Decimal(787758)

Decimal(7692011) middle muted purple

100
Decimal(14209785)

200
Decimal(11642100)

300
Decimal(9074670)

400 * Your Color
Decimal(7692011)

500
Decimal(4005091)

600
Decimal(3151797)

700
Decimal(2363784)

800
Decimal(1575771)

900
Decimal(788013)

Decimal(9008875)

100
Decimal(14275321)

200
Decimal(11708146)

300 * Your Color
Decimal(9008875)

400
Decimal(6704613)

500
Decimal(4137183)

600
Decimal(3349170)

700
Decimal(2495366)

800
Decimal(1641817)

900
Decimal(853549)

Decimal(10325483)

100
Decimal(14341367)

200
Decimal(11839728)

300 * Your Color
Decimal(10325483)

400
Decimal(6967777)

500
Decimal(4531929)

600
Decimal(3612334)

700
Decimal(2692994)

800
Decimal(1773399)

900
Decimal(919595)

Decimal(11576555)

100
Decimal(14407158)

200 * Your Color
Decimal(11576555)

300
Decimal(9601763)

400
Decimal(7231706)

500
Decimal(4861649)

600
Decimal(3876263)

700
Decimal(2890877)

800
Decimal(1905236)

900
Decimal(985386)

Decimal(12893419)

100
Decimal(14473459)

200 * Your Color
Decimal(12893419)

300
Decimal(9931228)

400
Decimal(7693008)

500
Decimal(5389252)

600
Decimal(4337565)

700
Decimal(3220342)

800
Decimal(2168655)

900
Decimal(1051687)

Decimal(14144491)

100 * Your Color
Decimal(14144491)

200
Decimal(12564959)

300
Decimal(10458831)

400
Decimal(8418239)

500
Decimal(6312111)

600
Decimal(5062796)

700
Decimal(3747945)

800
Decimal(2498630)

900
Decimal(1249315)

CSS Code

.main-color-1{ color:#2700EB; }
.main-bg-color-1{ background-color:#2700EB; }
.main-color-2{ color:#3B17EB; }
.main-bg-color-2{ background-color:#3B17EB; }
.main-color-3{ color:#4E2FEB; }
.main-bg-color-3{ background-color:#4E2FEB; }
.main-color-4{ color:#6247EB; }
.main-bg-color-4{ background-color:#6247EB; }
.main-color-5{ color:#755EEB; }
.main-bg-color-5{ background-color:#755EEB; }
.main-color-6{ color:#8976EB; }
.main-bg-color-6{ background-color:#8976EB; }
.main-color-7{ color:#9D8DEB; }
.main-bg-color-7{ background-color:#9D8DEB; }
.main-color-8{ color:#B0A4EB; }
.main-bg-color-8{ background-color:#B0A4EB; }
.main-color-9{ color:#C4BCEB; }
.main-bg-color-9{ background-color:#C4BCEB; }
.main-color-10{ color:#D7D3EB; }
.main-bg-color-10{ background-color:#D7D3EB; }

.color-1-100{ color:#D4CCFF; }
.bg-color-1-100{ background-color:#D4CCFF; }
.color-1-200{ color:#AA99FF; }
.bg-color-1-200{ background-color:#AA99FF; }
.color-1-300{ color:#7F66FF; }
.bg-color-1-300{ background-color:#7F66FF; }
.color-1-400{ color:#5533FF; }
.bg-color-1-400{ background-color:#5533FF; }
.color-1-500{ color:#2700EB; }
.bg-color-1-500{ background-color:#2700EB; }
.color-1-600{ color:#2200CC; }
.bg-color-1-600{ background-color:#2200CC; }
.color-1-700{ color:#190099; }
.bg-color-1-700{ background-color:#190099; }
.color-1-800{ color:#110066; }
.bg-color-1-800{ background-color:#110066; }
.color-1-900{ color:#080033; }
.bg-color-1-900{ background-color:#080033; }

.color-2-100{ color:#D7D0FB; }
.bg-color-2-100{ background-color:#D7D0FB; }
.color-2-200{ color:#B0A1F7; }
.bg-color-2-200{ background-color:#B0A1F7; }
.color-2-300{ color:#8872F3; }
.bg-color-2-300{ background-color:#8872F3; }
.color-2-400{ color:#6043EF; }
.bg-color-2-400{ background-color:#6043EF; }
.color-2-500{ color:#3B17EB; }
.bg-color-2-500{ background-color:#3B17EB; }
.color-2-600{ color:#2D10BC; }
.bg-color-2-600{ background-color:#2D10BC; }
.color-2-700{ color:#220C8D; }
.bg-color-2-700{ background-color:#220C8D; }
.color-2-800{ color:#17085E; }
.bg-color-2-800{ background-color:#17085E; }
.color-2-900{ color:#0B042F; }
.bg-color-2-900{ background-color:#0B042F; }

.color-3-100{ color:#D7D0FB; }
.bg-color-3-100{ background-color:#D7D0FB; }
.color-3-200{ color:#B0A2F6; }
.bg-color-3-200{ background-color:#B0A2F6; }
.color-3-300{ color:#8873F2; }
.bg-color-3-300{ background-color:#8873F2; }
.color-3-400{ color:#4E2FEB; }
.bg-color-3-400{ background-color:#4E2FEB; }
.color-3-500{ color:#3916E9; }
.bg-color-3-500{ background-color:#3916E9; }
.color-3-600{ color:#2E12BA; }
.bg-color-3-600{ background-color:#2E12BA; }
.color-3-700{ color:#220D8C; }
.bg-color-3-700{ background-color:#220D8C; }
.color-3-800{ color:#17095D; }
.bg-color-3-800{ background-color:#17095D; }
.color-3-900{ color:#0B042F; }
.bg-color-3-900{ background-color:#0B042F; }

.color-4-100{ color:#D8D1FA; }
.bg-color-4-100{ background-color:#D8D1FA; }
.color-4-200{ color:#B1A3F5; }
.bg-color-4-200{ background-color:#B1A3F5; }
.color-4-300{ color:#8975F0; }
.bg-color-4-300{ background-color:#8975F0; }
.color-4-400{ color:#6247EB; }
.bg-color-4-400{ background-color:#6247EB; }
.color-4-500{ color:#3B19E6; }
.bg-color-4-500{ background-color:#3B19E6; }
.color-4-600{ color:#2F14B8; }
.bg-color-4-600{ background-color:#2F14B8; }
.color-4-700{ color:#230F8A; }
.bg-color-4-700{ background-color:#230F8A; }
.color-4-800{ color:#180A5C; }
.bg-color-4-800{ background-color:#180A5C; }
.color-4-900{ color:#0C052E; }
.bg-color-4-900{ background-color:#0C052E; }

.color-5-100{ color:#D8D2F9; }
.bg-color-5-100{ background-color:#D8D2F9; }
.color-5-200{ color:#B1A4F4; }
.bg-color-5-200{ background-color:#B1A4F4; }
.color-5-300{ color:#8A77EE; }
.bg-color-5-300{ background-color:#8A77EE; }
.color-5-400{ color:#755EEB; }
.bg-color-5-400{ background-color:#755EEB; }
.color-5-500{ color:#3D1CE3; }
.bg-color-5-500{ background-color:#3D1CE3; }
.color-5-600{ color:#3017B5; }
.bg-color-5-600{ background-color:#3017B5; }
.color-5-700{ color:#241188; }
.bg-color-5-700{ background-color:#241188; }
.color-5-800{ color:#180B5B; }
.bg-color-5-800{ background-color:#180B5B; }
.color-5-900{ color:#0C062D; }
.bg-color-5-900{ background-color:#0C062D; }

.color-6-100{ color:#D9D2F9; }
.bg-color-6-100{ background-color:#D9D2F9; }
.color-6-200{ color:#B2A6F2; }
.bg-color-6-200{ background-color:#B2A6F2; }
.color-6-300{ color:#8976EB; }
.bg-color-6-300{ background-color:#8976EB; }
.color-6-400{ color:#664DE5; }
.bg-color-6-400{ background-color:#664DE5; }
.color-6-500{ color:#3F20DF; }
.bg-color-6-500{ background-color:#3F20DF; }
.color-6-600{ color:#331AB2; }
.bg-color-6-600{ background-color:#331AB2; }
.color-6-700{ color:#261386; }
.bg-color-6-700{ background-color:#261386; }
.color-6-800{ color:#190D59; }
.bg-color-6-800{ background-color:#190D59; }
.color-6-900{ color:#0D062D; }
.bg-color-6-900{ background-color:#0D062D; }

.color-7-100{ color:#DAD4F7; }
.bg-color-7-100{ background-color:#DAD4F7; }
.color-7-200{ color:#B4A8F0; }
.bg-color-7-200{ background-color:#B4A8F0; }
.color-7-300{ color:#9D8DEB; }
.bg-color-7-300{ background-color:#9D8DEB; }
.color-7-400{ color:#6A51E1; }
.bg-color-7-400{ background-color:#6A51E1; }
.color-7-500{ color:#4526D9; }
.bg-color-7-500{ background-color:#4526D9; }
.color-7-600{ color:#371EAE; }
.bg-color-7-600{ background-color:#371EAE; }
.color-7-700{ color:#291782; }
.bg-color-7-700{ background-color:#291782; }
.color-7-800{ color:#1B0F57; }
.bg-color-7-800{ background-color:#1B0F57; }
.color-7-900{ color:#0E082B; }
.bg-color-7-900{ background-color:#0E082B; }

.color-8-100{ color:#DBD5F6; }
.bg-color-8-100{ background-color:#DBD5F6; }
.color-8-200{ color:#B0A4EB; }
.bg-color-8-200{ background-color:#B0A4EB; }
.color-8-300{ color:#9282E3; }
.bg-color-8-300{ background-color:#9282E3; }
.color-8-400{ color:#6E58DA; }
.bg-color-8-400{ background-color:#6E58DA; }
.color-8-500{ color:#4A2ED1; }
.bg-color-8-500{ background-color:#4A2ED1; }
.color-8-600{ color:#3B25A7; }
.bg-color-8-600{ background-color:#3B25A7; }
.color-8-700{ color:#2C1C7D; }
.bg-color-8-700{ background-color:#2C1C7D; }
.color-8-800{ color:#1D1254; }
.bg-color-8-800{ background-color:#1D1254; }
.color-8-900{ color:#0F092A; }
.bg-color-8-900{ background-color:#0F092A; }

.color-9-100{ color:#DCD8F3; }
.bg-color-9-100{ background-color:#DCD8F3; }
.color-9-200{ color:#C4BCEB; }
.bg-color-9-200{ background-color:#C4BCEB; }
.color-9-300{ color:#9789DC; }
.bg-color-9-300{ background-color:#9789DC; }
.color-9-400{ color:#7562D0; }
.bg-color-9-400{ background-color:#7562D0; }
.color-9-500{ color:#523BC4; }
.bg-color-9-500{ background-color:#523BC4; }
.color-9-600{ color:#422F9D; }
.bg-color-9-600{ background-color:#422F9D; }
.color-9-700{ color:#312376; }
.bg-color-9-700{ background-color:#312376; }
.color-9-800{ color:#21174F; }
.bg-color-9-800{ background-color:#21174F; }
.color-9-900{ color:#100C27; }
.bg-color-9-900{ background-color:#100C27; }

.color-10-100{ color:#D7D3EB; }
.bg-color-10-100{ background-color:#D7D3EB; }
.color-10-200{ color:#BFB9DF; }
.bg-color-10-200{ background-color:#BFB9DF; }
.color-10-300{ color:#9F96CF; }
.bg-color-10-300{ background-color:#9F96CF; }
.color-10-400{ color:#8073BF; }
.bg-color-10-400{ background-color:#8073BF; }
.color-10-500{ color:#6050AF; }
.bg-color-10-500{ background-color:#6050AF; }
.color-10-600{ color:#4D408C; }
.bg-color-10-600{ background-color:#4D408C; }
.color-10-700{ color:#393069; }
.bg-color-10-700{ background-color:#393069; }
.color-10-800{ color:#262046; }
.bg-color-10-800{ background-color:#262046; }
.color-10-900{ color:#131023; }
.bg-color-10-900{ background-color:#131023; }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Decimal(2556139)	Decimal(3872747)	Decimal(5124075)	Decimal(6440939)	Decimal(7692011)	Decimal(9008875)	Decimal(10325483)	Decimal(11576555)	Decimal(12893419)	Decimal(14144491)

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(2556139)		Ratio: 1.10 Failed ⁵	Ratio: 1.28 Failed ⁵	Ratio: 1.58 Failed ⁵	Ratio: 1.99 Failed ⁵	Ratio: 2.56 Failed ⁵	Ratio: 3.26 AA 18pt ²	Ratio: 4.09 AA 18pt ²	Ratio: 5.14 AA ¹ AAA 18pt ⁴	Ratio: 6.30 AA ¹ AAA 18pt ⁴
Decimal(3872747)	Ratio: 1.10 Failed ⁵		Ratio: 1.17 Failed ⁵	Ratio: 1.44 Failed ⁵	Ratio: 1.82 Failed ⁵	Ratio: 2.33 Failed ⁵	Ratio: 2.97 Failed ⁵	Ratio: 3.73 AA 18pt ²	Ratio: 4.68 AA ¹ AAA 18pt ⁴	Ratio: 5.74 AA ¹ AAA 18pt ⁴
Decimal(5124075)	Ratio: 1.28 Failed ⁵	Ratio: 1.17 Failed ⁵		Ratio: 1.24 Failed ⁵	Ratio: 1.56 Failed ⁵	Ratio: 2.00 Failed ⁵	Ratio: 2.54 Failed ⁵	Ratio: 3.19 AA 18pt ²	Ratio: 4.01 AA 18pt ²	Ratio: 4.92 AA ¹ AAA 18pt ⁴
Decimal(6440939)	Ratio: 1.58 Failed ⁵	Ratio: 1.44 Failed ⁵	Ratio: 1.24 Failed ⁵		Ratio: 1.26 Failed ⁵	Ratio: 1.62 Failed ⁵	Ratio: 2.06 Failed ⁵	Ratio: 2.58 Failed ⁵	Ratio: 3.24 AA 18pt ²	Ratio: 3.98 AA 18pt ²
Decimal(7692011)	Ratio: 1.99 Failed ⁵	Ratio: 1.82 Failed ⁵	Ratio: 1.56 Failed ⁵	Ratio: 1.26 Failed ⁵		Ratio: 1.28 Failed ⁵	Ratio: 1.63 Failed ⁵	Ratio: 2.05 Failed ⁵	Ratio: 2.58 Failed ⁵	Ratio: 3.16 AA 18pt ²
Decimal(9008875)	Ratio: 2.56 Failed ⁵	Ratio: 2.33 Failed ⁵	Ratio: 2.00 Failed ⁵	Ratio: 1.62 Failed ⁵	Ratio: 1.28 Failed ⁵		Ratio: 1.27 Failed ⁵	Ratio: 1.60 Failed ⁵	Ratio: 2.01 Failed ⁵	Ratio: 2.46 Failed ⁵
Decimal(10325483)	Ratio: 3.26 AA 18pt ²	Ratio: 2.97 Failed ⁵	Ratio: 2.54 Failed ⁵	Ratio: 2.06 Failed ⁵	Ratio: 1.63 Failed ⁵	Ratio: 1.27 Failed ⁵		Ratio: 1.26 Failed ⁵	Ratio: 1.58 Failed ⁵	Ratio: 1.94 Failed ⁵
Decimal(11576555)	Ratio: 4.09 AA 18pt ²	Ratio: 3.73 AA 18pt ²	Ratio: 3.19 AA 18pt ²	Ratio: 2.58 Failed ⁵	Ratio: 2.05 Failed ⁵	Ratio: 1.60 Failed ⁵	Ratio: 1.26 Failed ⁵		Ratio: 1.25 Failed ⁵	Ratio: 1.54 Failed ⁵
Decimal(12893419)	Ratio: 5.14 AA ¹ AAA 18pt ⁴	Ratio: 4.68 AA ¹ AAA 18pt ⁴	Ratio: 4.01 AA 18pt ²	Ratio: 3.24 AA 18pt ²	Ratio: 2.58 Failed ⁵	Ratio: 2.01 Failed ⁵	Ratio: 1.58 Failed ⁵	Ratio: 1.25 Failed ⁵		Ratio: 1.23 Failed ⁵
Decimal(14144491)	Ratio: 6.30 AA ¹ AAA 18pt ⁴	Ratio: 5.74 AA ¹ AAA 18pt ⁴	Ratio: 4.92 AA ¹ AAA 18pt ⁴	Ratio: 3.98 AA 18pt ²	Ratio: 3.16 AA 18pt ²	Ratio: 2.46 Failed ⁵	Ratio: 1.94 Failed ⁵	Ratio: 1.54 Failed ⁵	Ratio: 1.23 Failed ⁵

Color Bucket