Converting Colors

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
Android(4279674591)

Main Color 2
Android(4278226115)

Main Color 3
Android(4278219432)

Main Color 4
Android(4278213261)

Main Color 5
Android(4278207091)

Main Color 6
Android(4278201434)

Main Color 7
Android(4278196546)

Main Color 8
Android(4278190892)

Main Color 9
Android(4278190358)

Main Color 10
Android(4278190080)

Android(4279674591) middle washed azure

100
Android(4291948538)

200
Android(4288863990)

300
Android(4285845233)

400
Android(4282760685)

500 * Your Color
Android(4279674591)

600
Android(4279405242)

700
Android(4279134347)

800
Android(4278797661)

900
Android(4278526766)

Android(4278226115) dark washed azure

100
Android(4291621375)

200
Android(4288275199)

300
Android(4284929279)

400
Android(4281583103)

500
Android(4278237183)

600 * Your Color
Android(4278226115)

700
Android(4278218393)

800
Android(4278208870)

900
Android(4278199603)

Android(4278219432)

100
Android(4291620863)

200
Android(4288274175)

300
Android(4284927743)

400
Android(4281581055)

500
Android(4278234623)

600
Android(4278225612)

700 * Your Color
Android(4278219432)

800
Android(4278207846)

900
Android(4278199091)

Android(4278213261)

100
Android(4291620351)

200
Android(4288273151)

300
Android(4284926207)

400
Android(4281579007)

500
Android(4278232063)

600
Android(4278223564)

700 * Your Color
Android(4278213261)

800
Android(4278206822)

900
Android(4278198579)

Android(4278207091)

100
Android(4291619327)

200
Android(4288271615)

300
Android(4284923647)

400
Android(4281575679)

500
Android(4278227711)

600
Android(4278220236)

700
Android(4278212761)

800 * Your Color
Android(4278207091)

900
Android(4278197555)

Android(4278201434)

100
Android(4291618303)

200
Android(4288269311)

300
Android(4284920319)

400
Android(4281571327)

500
Android(4278222335)

600
Android(4278215884)

700
Android(4278209433)

800 * Your Color
Android(4278201434)

900
Android(4278196531)

Android(4278196546)

100
Android(4291616767)

200
Android(4288266495)

300
Android(4284915967)

400
Android(4281565439)

500
Android(4278215167)

600
Android(4278209996)

700
Android(4278205081)

800
Android(4278200166)

900 * Your Color
Android(4278196546)

Android(4278190892)

100
Android(4291612671)

200
Android(4288258303)

300
Android(4284903679)

400
Android(4281549311)

500
Android(4278194687)

600
Android(4278193868)

700
Android(4278192793)

800
Android(4278191974)

900 * Your Color
Android(4278190892)

Android(4278190358)

100
Android(4291612415)

200
Android(4288257791)

300
Android(4284902911)

400
Android(4281548031)

500
Android(4278193407)

600
Android(4278192588)

700
Android(4278192025)

800
Android(4278191462)

900
Android(4278190643)

Android(4278190080)

100
Android(4293322470)

200
Android(4291611852)

300
Android(4289967027)

400
Android(4288256409)

500
Android(4286611584)

600
Android(4284900966)

700
Android(4283256141)

800
Android(4281545523)

900
Android(4279900698)

CSS Code

.main-color-1{ color:rgb(22, 166, 223); }
.main-bg-color-1{ background-color:rgb(22, 166, 223); }
.main-color-2{ color:rgb(0, 140, 195); }
.main-bg-color-2{ background-color:rgb(0, 140, 195); }
.main-color-3{ color:rgb(0, 114, 168); }
.main-bg-color-3{ background-color:rgb(0, 114, 168); }
.main-color-4{ color:rgb(0, 90, 141); }
.main-bg-color-4{ background-color:rgb(0, 90, 141); }
.main-color-5{ color:rgb(0, 66, 115); }
.main-bg-color-5{ background-color:rgb(0, 66, 115); }
.main-color-6{ color:rgb(0, 44, 90); }
.main-bg-color-6{ background-color:rgb(0, 44, 90); }
.main-color-7{ color:rgb(0, 25, 66); }
.main-bg-color-7{ background-color:rgb(0, 25, 66); }
.main-color-8{ color:rgb(0, 3, 44); }
.main-bg-color-8{ background-color:rgb(0, 3, 44); }
.main-color-9{ color:rgb(0, 1, 22); }
.main-bg-color-9{ background-color:rgb(0, 1, 22); }
.main-color-10{ color:rgb(0, 0, 0); }
.main-bg-color-10{ background-color:rgb(0, 0, 0); }

.color-1-100{ color:rgb(209, 239, 250); }
.bg-color-1-100{ background-color:rgb(209, 239, 250); }
.color-1-200{ color:rgb(162, 222, 246); }
.bg-color-1-200{ background-color:rgb(162, 222, 246); }
.color-1-300{ color:rgb(116, 206, 241); }
.bg-color-1-300{ background-color:rgb(116, 206, 241); }
.color-1-400{ color:rgb(69, 189, 237); }
.bg-color-1-400{ background-color:rgb(69, 189, 237); }
.color-1-500{ color:rgb(22, 166, 223); }
.bg-color-1-500{ background-color:rgb(22, 166, 223); }
.color-1-600{ color:rgb(18, 138, 186); }
.bg-color-1-600{ background-color:rgb(18, 138, 186); }
.color-1-700{ color:rgb(14, 104, 139); }
.bg-color-1-700{ background-color:rgb(14, 104, 139); }
.color-1-800{ color:rgb(9, 69, 93); }
.bg-color-1-800{ background-color:rgb(9, 69, 93); }
.color-1-900{ color:rgb(5, 35, 46); }
.bg-color-1-900{ background-color:rgb(5, 35, 46); }

.color-2-100{ color:rgb(204, 241, 255); }
.bg-color-2-100{ background-color:rgb(204, 241, 255); }
.color-2-200{ color:rgb(153, 226, 255); }
.bg-color-2-200{ background-color:rgb(153, 226, 255); }
.color-2-300{ color:rgb(102, 212, 255); }
.bg-color-2-300{ background-color:rgb(102, 212, 255); }
.color-2-400{ color:rgb(51, 197, 255); }
.bg-color-2-400{ background-color:rgb(51, 197, 255); }
.color-2-500{ color:rgb(0, 183, 255); }
.bg-color-2-500{ background-color:rgb(0, 183, 255); }
.color-2-600{ color:rgb(0, 140, 195); }
.bg-color-2-600{ background-color:rgb(0, 140, 195); }
.color-2-700{ color:rgb(0, 110, 153); }
.bg-color-2-700{ background-color:rgb(0, 110, 153); }
.color-2-800{ color:rgb(0, 73, 102); }
.bg-color-2-800{ background-color:rgb(0, 73, 102); }
.color-2-900{ color:rgb(0, 37, 51); }
.bg-color-2-900{ background-color:rgb(0, 37, 51); }

.color-3-100{ color:rgb(204, 239, 255); }
.bg-color-3-100{ background-color:rgb(204, 239, 255); }
.color-3-200{ color:rgb(153, 222, 255); }
.bg-color-3-200{ background-color:rgb(153, 222, 255); }
.color-3-300{ color:rgb(102, 206, 255); }
.bg-color-3-300{ background-color:rgb(102, 206, 255); }
.color-3-400{ color:rgb(51, 189, 255); }
.bg-color-3-400{ background-color:rgb(51, 189, 255); }
.color-3-500{ color:rgb(0, 173, 255); }
.bg-color-3-500{ background-color:rgb(0, 173, 255); }
.color-3-600{ color:rgb(0, 138, 204); }
.bg-color-3-600{ background-color:rgb(0, 138, 204); }
.color-3-700{ color:rgb(0, 114, 168); }
.bg-color-3-700{ background-color:rgb(0, 114, 168); }
.color-3-800{ color:rgb(0, 69, 102); }
.bg-color-3-800{ background-color:rgb(0, 69, 102); }
.color-3-900{ color:rgb(0, 35, 51); }
.bg-color-3-900{ background-color:rgb(0, 35, 51); }

.color-4-100{ color:rgb(204, 237, 255); }
.bg-color-4-100{ background-color:rgb(204, 237, 255); }
.color-4-200{ color:rgb(153, 218, 255); }
.bg-color-4-200{ background-color:rgb(153, 218, 255); }
.color-4-300{ color:rgb(102, 200, 255); }
.bg-color-4-300{ background-color:rgb(102, 200, 255); }
.color-4-400{ color:rgb(51, 181, 255); }
.bg-color-4-400{ background-color:rgb(51, 181, 255); }
.color-4-500{ color:rgb(0, 163, 255); }
.bg-color-4-500{ background-color:rgb(0, 163, 255); }
.color-4-600{ color:rgb(0, 130, 204); }
.bg-color-4-600{ background-color:rgb(0, 130, 204); }
.color-4-700{ color:rgb(0, 90, 141); }
.bg-color-4-700{ background-color:rgb(0, 90, 141); }
.color-4-800{ color:rgb(0, 65, 102); }
.bg-color-4-800{ background-color:rgb(0, 65, 102); }
.color-4-900{ color:rgb(0, 33, 51); }
.bg-color-4-900{ background-color:rgb(0, 33, 51); }

.color-5-100{ color:rgb(204, 233, 255); }
.bg-color-5-100{ background-color:rgb(204, 233, 255); }
.color-5-200{ color:rgb(153, 212, 255); }
.bg-color-5-200{ background-color:rgb(153, 212, 255); }
.color-5-300{ color:rgb(102, 190, 255); }
.bg-color-5-300{ background-color:rgb(102, 190, 255); }
.color-5-400{ color:rgb(51, 168, 255); }
.bg-color-5-400{ background-color:rgb(51, 168, 255); }
.color-5-500{ color:rgb(0, 146, 255); }
.bg-color-5-500{ background-color:rgb(0, 146, 255); }
.color-5-600{ color:rgb(0, 117, 204); }
.bg-color-5-600{ background-color:rgb(0, 117, 204); }
.color-5-700{ color:rgb(0, 88, 153); }
.bg-color-5-700{ background-color:rgb(0, 88, 153); }
.color-5-800{ color:rgb(0, 66, 115); }
.bg-color-5-800{ background-color:rgb(0, 66, 115); }
.color-5-900{ color:rgb(0, 29, 51); }
.bg-color-5-900{ background-color:rgb(0, 29, 51); }

.color-6-100{ color:rgb(204, 229, 255); }
.bg-color-6-100{ background-color:rgb(204, 229, 255); }
.color-6-200{ color:rgb(153, 203, 255); }
.bg-color-6-200{ background-color:rgb(153, 203, 255); }
.color-6-300{ color:rgb(102, 177, 255); }
.bg-color-6-300{ background-color:rgb(102, 177, 255); }
.color-6-400{ color:rgb(51, 151, 255); }
.bg-color-6-400{ background-color:rgb(51, 151, 255); }
.color-6-500{ color:rgb(0, 125, 255); }
.bg-color-6-500{ background-color:rgb(0, 125, 255); }
.color-6-600{ color:rgb(0, 100, 204); }
.bg-color-6-600{ background-color:rgb(0, 100, 204); }
.color-6-700{ color:rgb(0, 75, 153); }
.bg-color-6-700{ background-color:rgb(0, 75, 153); }
.color-6-800{ color:rgb(0, 44, 90); }
.bg-color-6-800{ background-color:rgb(0, 44, 90); }
.color-6-900{ color:rgb(0, 25, 51); }
.bg-color-6-900{ background-color:rgb(0, 25, 51); }

.color-7-100{ color:rgb(204, 223, 255); }
.bg-color-7-100{ background-color:rgb(204, 223, 255); }
.color-7-200{ color:rgb(153, 192, 255); }
.bg-color-7-200{ background-color:rgb(153, 192, 255); }
.color-7-300{ color:rgb(102, 160, 255); }
.bg-color-7-300{ background-color:rgb(102, 160, 255); }
.color-7-400{ color:rgb(51, 128, 255); }
.bg-color-7-400{ background-color:rgb(51, 128, 255); }
.color-7-500{ color:rgb(0, 97, 255); }
.bg-color-7-500{ background-color:rgb(0, 97, 255); }
.color-7-600{ color:rgb(0, 77, 204); }
.bg-color-7-600{ background-color:rgb(0, 77, 204); }
.color-7-700{ color:rgb(0, 58, 153); }
.bg-color-7-700{ background-color:rgb(0, 58, 153); }
.color-7-800{ color:rgb(0, 39, 102); }
.bg-color-7-800{ background-color:rgb(0, 39, 102); }
.color-7-900{ color:rgb(0, 25, 66); }
.bg-color-7-900{ background-color:rgb(0, 25, 66); }

.color-8-100{ color:rgb(204, 207, 255); }
.bg-color-8-100{ background-color:rgb(204, 207, 255); }
.color-8-200{ color:rgb(153, 160, 255); }
.bg-color-8-200{ background-color:rgb(153, 160, 255); }
.color-8-300{ color:rgb(102, 112, 255); }
.bg-color-8-300{ background-color:rgb(102, 112, 255); }
.color-8-400{ color:rgb(51, 65, 255); }
.bg-color-8-400{ background-color:rgb(51, 65, 255); }
.color-8-500{ color:rgb(0, 17, 255); }
.bg-color-8-500{ background-color:rgb(0, 17, 255); }
.color-8-600{ color:rgb(0, 14, 204); }
.bg-color-8-600{ background-color:rgb(0, 14, 204); }
.color-8-700{ color:rgb(0, 10, 153); }
.bg-color-8-700{ background-color:rgb(0, 10, 153); }
.color-8-800{ color:rgb(0, 7, 102); }
.bg-color-8-800{ background-color:rgb(0, 7, 102); }
.color-8-900{ color:rgb(0, 3, 44); }
.bg-color-8-900{ background-color:rgb(0, 3, 44); }

.color-9-100{ color:rgb(204, 206, 255); }
.bg-color-9-100{ background-color:rgb(204, 206, 255); }
.color-9-200{ color:rgb(153, 158, 255); }
.bg-color-9-200{ background-color:rgb(153, 158, 255); }
.color-9-300{ color:rgb(102, 109, 255); }
.bg-color-9-300{ background-color:rgb(102, 109, 255); }
.color-9-400{ color:rgb(51, 60, 255); }
.bg-color-9-400{ background-color:rgb(51, 60, 255); }
.color-9-500{ color:rgb(0, 12, 255); }
.bg-color-9-500{ background-color:rgb(0, 12, 255); }
.color-9-600{ color:rgb(0, 9, 204); }
.bg-color-9-600{ background-color:rgb(0, 9, 204); }
.color-9-700{ color:rgb(0, 7, 153); }
.bg-color-9-700{ background-color:rgb(0, 7, 153); }
.color-9-800{ color:rgb(0, 5, 102); }
.bg-color-9-800{ background-color:rgb(0, 5, 102); }
.color-9-900{ color:rgb(0, 2, 51); }
.bg-color-9-900{ background-color:rgb(0, 2, 51); }

.color-10-100{ color:rgb(230, 230, 230); }
.bg-color-10-100{ background-color:rgb(230, 230, 230); }
.color-10-200{ color:rgb(204, 204, 204); }
.bg-color-10-200{ background-color:rgb(204, 204, 204); }
.color-10-300{ color:rgb(179, 179, 179); }
.bg-color-10-300{ background-color:rgb(179, 179, 179); }
.color-10-400{ color:rgb(153, 153, 153); }
.bg-color-10-400{ background-color:rgb(153, 153, 153); }
.color-10-500{ color:rgb(128, 128, 128); }
.bg-color-10-500{ background-color:rgb(128, 128, 128); }
.color-10-600{ color:rgb(102, 102, 102); }
.bg-color-10-600{ background-color:rgb(102, 102, 102); }
.color-10-700{ color:rgb(77, 77, 77); }
.bg-color-10-700{ background-color:rgb(77, 77, 77); }
.color-10-800{ color:rgb(51, 51, 51); }
.bg-color-10-800{ background-color:rgb(51, 51, 51); }
.color-10-900{ color:rgb(26, 26, 26); }
.bg-color-10-900{ background-color:rgb(26, 26, 26); }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Android(4279674591)	Android(4278226115)	Android(4278219432)	Android(4278213261)	Android(4278207091)	Android(4278201434)	Android(4278196546)	Android(4278190892)	Android(4278190358)	Android(4278190080)

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.
Android(4279674591)		Ratio: 1.36 Failed ⁵	Ratio: 1.90 Failed ⁵	Ratio: 2.65 Failed ⁵	Ratio: 3.73 AA 18pt ²	Ratio: 5.01 AA ¹ AAA 18pt ⁴	Ratio: 6.20 AA ¹ AAA 18pt ⁴	Ratio: 7.20 Passed ⁶	Ratio: 7.44 Passed ⁶	Ratio: 7.55 Passed ⁶
Android(4278226115)	Ratio: 1.36 Failed ⁵		Ratio: 1.39 Failed ⁵	Ratio: 1.95 Failed ⁵	Ratio: 2.73 Failed ⁵	Ratio: 3.67 AA 18pt ²	Ratio: 4.55 AA ¹ AAA 18pt ⁴	Ratio: 5.28 AA ¹ AAA 18pt ⁴	Ratio: 5.45 AA ¹ AAA 18pt ⁴	Ratio: 5.54 AA ¹ AAA 18pt ⁴
Android(4278219432)	Ratio: 1.90 Failed ⁵	Ratio: 1.39 Failed ⁵		Ratio: 1.40 Failed ⁵	Ratio: 1.96 Failed ⁵	Ratio: 2.63 Failed ⁵	Ratio: 3.26 AA 18pt ²	Ratio: 3.79 AA 18pt ²	Ratio: 3.91 AA 18pt ²	Ratio: 3.97 AA 18pt ²
Android(4278213261)	Ratio: 2.65 Failed ⁵	Ratio: 1.95 Failed ⁵	Ratio: 1.40 Failed ⁵		Ratio: 1.40 Failed ⁵	Ratio: 1.89 Failed ⁵	Ratio: 2.34 Failed ⁵	Ratio: 2.71 Failed ⁵	Ratio: 2.80 Failed ⁵	Ratio: 2.85 Failed ⁵
Android(4278207091)	Ratio: 3.73 AA 18pt ²	Ratio: 2.73 Failed ⁵	Ratio: 1.96 Failed ⁵	Ratio: 1.40 Failed ⁵		Ratio: 1.34 Failed ⁵	Ratio: 1.66 Failed ⁵	Ratio: 1.93 Failed ⁵	Ratio: 1.99 Failed ⁵	Ratio: 2.03 Failed ⁵
Android(4278201434)	Ratio: 5.01 AA ¹ AAA 18pt ⁴	Ratio: 3.67 AA 18pt ²	Ratio: 2.63 Failed ⁵	Ratio: 1.89 Failed ⁵	Ratio: 1.34 Failed ⁵		Ratio: 1.24 Failed ⁵	Ratio: 1.44 Failed ⁵	Ratio: 1.48 Failed ⁵	Ratio: 1.51 Failed ⁵
Android(4278196546)	Ratio: 6.20 AA ¹ AAA 18pt ⁴	Ratio: 4.55 AA ¹ AAA 18pt ⁴	Ratio: 3.26 AA 18pt ²	Ratio: 2.34 Failed ⁵	Ratio: 1.66 Failed ⁵	Ratio: 1.24 Failed ⁵		Ratio: 1.16 Failed ⁵	Ratio: 1.20 Failed ⁵	Ratio: 1.22 Failed ⁵
Android(4278190892)	Ratio: 7.20 Passed ⁶	Ratio: 5.28 AA ¹ AAA 18pt ⁴	Ratio: 3.79 AA 18pt ²	Ratio: 2.71 Failed ⁵	Ratio: 1.93 Failed ⁵	Ratio: 1.44 Failed ⁵	Ratio: 1.16 Failed ⁵		Ratio: 1.03 Failed ⁵	Ratio: 1.05 Failed ⁵
Android(4278190358)	Ratio: 7.44 Passed ⁶	Ratio: 5.45 AA ¹ AAA 18pt ⁴	Ratio: 3.91 AA 18pt ²	Ratio: 2.80 Failed ⁵	Ratio: 1.99 Failed ⁵	Ratio: 1.48 Failed ⁵	Ratio: 1.20 Failed ⁵	Ratio: 1.03 Failed ⁵		Ratio: 1.02 Failed ⁵
Android(4278190080)	Ratio: 7.55 Passed ⁶	Ratio: 5.54 AA ¹ AAA 18pt ⁴	Ratio: 3.97 AA 18pt ²	Ratio: 2.85 Failed ⁵	Ratio: 2.03 Failed ⁵	Ratio: 1.51 Failed ⁵	Ratio: 1.22 Failed ⁵	Ratio: 1.05 Failed ⁵	Ratio: 1.02 Failed ⁵

Color Bucket