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

Main Color 2
Decimal(8039394)

Main Color 3
Decimal(6594530)

Main Color 4
Decimal(5084130)

Main Color 5
Decimal(3639266)

Main Color 6
Decimal(2128866)

Main Color 7
Decimal(618466)

Main Color 8
Decimal(27362)

Decimal(9549794)

100
Decimal(14149108)

200
Decimal(11455210)

300 * Your Color
Decimal(9549794)

400
Decimal(6198740)

500
Decimal(3505098)

600
Decimal(2843297)

700
Decimal(2116217)

800
Decimal(1388881)

900
Decimal(727336)

Decimal(8039394)

100
Decimal(14018038)

200
Decimal(11258605)

300 * Your Color
Decimal(8039394)

400
Decimal(5805530)

500
Decimal(3046353)

600
Decimal(2450087)

700
Decimal(1788542)

800
Decimal(1192276)

900
Decimal(596266)

Decimal(6594530)

100
Decimal(13952247)

200
Decimal(11127535)

300
Decimal(8302567)

400 * Your Color
Decimal(6594530)

500
Decimal(2652887)

600
Decimal(2122412)

700
Decimal(1591681)

800
Decimal(1061206)

900
Decimal(530475)

Decimal(5084130) light muted azure

100
Decimal(13886712)

200
Decimal(10996465)

300
Decimal(8105962)

400 * Your Color
Decimal(5084130)

500
Decimal(2390747)

600
Decimal(1925807)

700
Decimal(1395076)

800
Decimal(930136)

900
Decimal(464940)

Decimal(3639266) middle washed azure

100
Decimal(13821177)

200
Decimal(10930930)

300
Decimal(7974892)

400 * Your Color
Decimal(3639266)

500
Decimal(2128351)

600
Decimal(1728946)

700
Decimal(1264006)

800
Decimal(864601)

900
Decimal(399405)

Decimal(2128866) dark washed azure

100
Decimal(13821177)

200
Decimal(10865395)

300
Decimal(7909357)

400
Decimal(4887784)

500 * Your Color
Decimal(2128866)

600
Decimal(1532341)

700
Decimal(1198471)

800
Decimal(799066)

900
Decimal(399405)

Decimal(618466) dark washed azure

100
Decimal(13559037)

200
Decimal(10340859)

300
Decimal(7122681)

400
Decimal(3904503)

500 * Your Color
Decimal(618466)

600
Decimal(549060)

700
Decimal(411795)

800
Decimal(274530)

900
Decimal(137265)

Decimal(27362) dark washed azure

100
Decimal(13427967)

200
Decimal(10078719)

300
Decimal(6729471)

400
Decimal(3380223)

500
Decimal(30975)

600 * Your Color
Decimal(27362)

700
Decimal(18585)

800
Decimal(12390)

900
Decimal(6195)

CSS Code

.main-color-1{ color:#91B7E2; }
.main-bg-color-1{ background-color:#91B7E2; }
.main-color-2{ color:#7AABE2; }
.main-bg-color-2{ background-color:#7AABE2; }
.main-color-3{ color:#649FE2; }
.main-bg-color-3{ background-color:#649FE2; }
.main-color-4{ color:#4D93E2; }
.main-bg-color-4{ background-color:#4D93E2; }
.main-color-5{ color:#3787E2; }
.main-bg-color-5{ background-color:#3787E2; }
.main-color-6{ color:#207BE2; }
.main-bg-color-6{ background-color:#207BE2; }
.main-color-7{ color:#096FE2; }
.main-bg-color-7{ background-color:#096FE2; }
.main-color-8{ color:#006AE2; }
.main-bg-color-8{ background-color:#006AE2; }

.color-1-100{ color:#D7E5F4; }
.bg-color-1-100{ background-color:#D7E5F4; }
.color-1-200{ color:#AECAEA; }
.bg-color-1-200{ background-color:#AECAEA; }
.color-1-300{ color:#91B7E2; }
.bg-color-1-300{ background-color:#91B7E2; }
.color-1-400{ color:#5E95D4; }
.bg-color-1-400{ background-color:#5E95D4; }
.color-1-500{ color:#357BCA; }
.bg-color-1-500{ background-color:#357BCA; }
.color-1-600{ color:#2B62A1; }
.bg-color-1-600{ background-color:#2B62A1; }
.color-1-700{ color:#204A79; }
.bg-color-1-700{ background-color:#204A79; }
.color-1-800{ color:#153151; }
.bg-color-1-800{ background-color:#153151; }
.color-1-900{ color:#0B1928; }
.bg-color-1-900{ background-color:#0B1928; }

.color-2-100{ color:#D5E5F6; }
.bg-color-2-100{ background-color:#D5E5F6; }
.color-2-200{ color:#ABCAED; }
.bg-color-2-200{ background-color:#ABCAED; }
.color-2-300{ color:#7AABE2; }
.bg-color-2-300{ background-color:#7AABE2; }
.color-2-400{ color:#5895DA; }
.bg-color-2-400{ background-color:#5895DA; }
.color-2-500{ color:#2E7BD1; }
.bg-color-2-500{ background-color:#2E7BD1; }
.color-2-600{ color:#2562A7; }
.bg-color-2-600{ background-color:#2562A7; }
.color-2-700{ color:#1B4A7E; }
.bg-color-2-700{ background-color:#1B4A7E; }
.color-2-800{ color:#123154; }
.bg-color-2-800{ background-color:#123154; }
.color-2-900{ color:#09192A; }
.bg-color-2-900{ background-color:#09192A; }

.color-3-100{ color:#D4E4F7; }
.bg-color-3-100{ background-color:#D4E4F7; }
.color-3-200{ color:#A9CAEF; }
.bg-color-3-200{ background-color:#A9CAEF; }
.color-3-300{ color:#7EAFE7; }
.bg-color-3-300{ background-color:#7EAFE7; }
.color-3-400{ color:#649FE2; }
.bg-color-3-400{ background-color:#649FE2; }
.color-3-500{ color:#287AD7; }
.bg-color-3-500{ background-color:#287AD7; }
.color-3-600{ color:#2062AC; }
.bg-color-3-600{ background-color:#2062AC; }
.color-3-700{ color:#184981; }
.bg-color-3-700{ background-color:#184981; }
.color-3-800{ color:#103156; }
.bg-color-3-800{ background-color:#103156; }
.color-3-900{ color:#08182B; }
.bg-color-3-900{ background-color:#08182B; }

.color-4-100{ color:#D3E4F8; }
.bg-color-4-100{ background-color:#D3E4F8; }
.color-4-200{ color:#A7CAF1; }
.bg-color-4-200{ background-color:#A7CAF1; }
.color-4-300{ color:#7BAFEA; }
.bg-color-4-300{ background-color:#7BAFEA; }
.color-4-400{ color:#4D93E2; }
.bg-color-4-400{ background-color:#4D93E2; }
.color-4-500{ color:#247ADB; }
.bg-color-4-500{ background-color:#247ADB; }
.color-4-600{ color:#1D62AF; }
.bg-color-4-600{ background-color:#1D62AF; }
.color-4-700{ color:#154984; }
.bg-color-4-700{ background-color:#154984; }
.color-4-800{ color:#0E3158; }
.bg-color-4-800{ background-color:#0E3158; }
.color-4-900{ color:#07182C; }
.bg-color-4-900{ background-color:#07182C; }

.color-5-100{ color:#D2E4F9; }
.bg-color-5-100{ background-color:#D2E4F9; }
.color-5-200{ color:#A6CAF2; }
.bg-color-5-200{ background-color:#A6CAF2; }
.color-5-300{ color:#79AFEC; }
.bg-color-5-300{ background-color:#79AFEC; }
.color-5-400{ color:#3787E2; }
.bg-color-5-400{ background-color:#3787E2; }
.color-5-500{ color:#2079DF; }
.bg-color-5-500{ background-color:#2079DF; }
.color-5-600{ color:#1A61B2; }
.bg-color-5-600{ background-color:#1A61B2; }
.color-5-700{ color:#134986; }
.bg-color-5-700{ background-color:#134986; }
.color-5-800{ color:#0D3159; }
.bg-color-5-800{ background-color:#0D3159; }
.color-5-900{ color:#06182D; }
.bg-color-5-900{ background-color:#06182D; }

.color-6-100{ color:#D2E4F9; }
.bg-color-6-100{ background-color:#D2E4F9; }
.color-6-200{ color:#A5CAF3; }
.bg-color-6-200{ background-color:#A5CAF3; }
.color-6-300{ color:#78AFED; }
.bg-color-6-300{ background-color:#78AFED; }
.color-6-400{ color:#4A94E8; }
.bg-color-6-400{ background-color:#4A94E8; }
.color-6-500{ color:#207BE2; }
.bg-color-6-500{ background-color:#207BE2; }
.color-6-600{ color:#1761B5; }
.bg-color-6-600{ background-color:#1761B5; }
.color-6-700{ color:#124987; }
.bg-color-6-700{ background-color:#124987; }
.color-6-800{ color:#0C315A; }
.bg-color-6-800{ background-color:#0C315A; }
.color-6-900{ color:#06182D; }
.bg-color-6-900{ background-color:#06182D; }

.color-7-100{ color:#CEE4FD; }
.bg-color-7-100{ background-color:#CEE4FD; }
.color-7-200{ color:#9DC9FB; }
.bg-color-7-200{ background-color:#9DC9FB; }
.color-7-300{ color:#6CAEF9; }
.bg-color-7-300{ background-color:#6CAEF9; }
.color-7-400{ color:#3B93F7; }
.bg-color-7-400{ background-color:#3B93F7; }
.color-7-500{ color:#096FE2; }
.bg-color-7-500{ background-color:#096FE2; }
.color-7-600{ color:#0860C4; }
.bg-color-7-600{ background-color:#0860C4; }
.color-7-700{ color:#064893; }
.bg-color-7-700{ background-color:#064893; }
.color-7-800{ color:#043062; }
.bg-color-7-800{ background-color:#043062; }
.color-7-900{ color:#021831; }
.bg-color-7-900{ background-color:#021831; }

.color-8-100{ color:#CCE4FF; }
.bg-color-8-100{ background-color:#CCE4FF; }
.color-8-200{ color:#99C9FF; }
.bg-color-8-200{ background-color:#99C9FF; }
.color-8-300{ color:#66AEFF; }
.bg-color-8-300{ background-color:#66AEFF; }
.color-8-400{ color:#3393FF; }
.bg-color-8-400{ background-color:#3393FF; }
.color-8-500{ color:#0078FF; }
.bg-color-8-500{ background-color:#0078FF; }
.color-8-600{ color:#006AE2; }
.bg-color-8-600{ background-color:#006AE2; }
.color-8-700{ color:#004899; }
.bg-color-8-700{ background-color:#004899; }
.color-8-800{ color:#003066; }
.bg-color-8-800{ background-color:#003066; }
.color-8-900{ color:#001833; }
.bg-color-8-900{ background-color:#001833; }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Decimal(9549794)	Decimal(8039394)	Decimal(6594530)	Decimal(5084130)	Decimal(3639266)	Decimal(2128866)	Decimal(618466)	Decimal(27362)

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(9549794)		Ratio: 1.15 Failed ⁵	Ratio: 1.33 Failed ⁵	Ratio: 1.53 Failed ⁵	Ratio: 1.76 Failed ⁵	Ratio: 2.02 Failed ⁵	Ratio: 2.30 Failed ⁵	Ratio: 2.42 Failed ⁵
Decimal(8039394)	Ratio: 1.15 Failed ⁵		Ratio: 1.15 Failed ⁵	Ratio: 1.33 Failed ⁵	Ratio: 1.53 Failed ⁵	Ratio: 1.75 Failed ⁵	Ratio: 2.00 Failed ⁵	Ratio: 2.10 Failed ⁵
Decimal(6594530)	Ratio: 1.33 Failed ⁵	Ratio: 1.15 Failed ⁵		Ratio: 1.15 Failed ⁵	Ratio: 1.33 Failed ⁵	Ratio: 1.52 Failed ⁵	Ratio: 1.73 Failed ⁵	Ratio: 1.83 Failed ⁵
Decimal(5084130)	Ratio: 1.53 Failed ⁵	Ratio: 1.33 Failed ⁵	Ratio: 1.15 Failed ⁵		Ratio: 1.15 Failed ⁵	Ratio: 1.32 Failed ⁵	Ratio: 1.50 Failed ⁵	Ratio: 1.58 Failed ⁵
Decimal(3639266)	Ratio: 1.76 Failed ⁵	Ratio: 1.53 Failed ⁵	Ratio: 1.33 Failed ⁵	Ratio: 1.15 Failed ⁵		Ratio: 1.15 Failed ⁵	Ratio: 1.31 Failed ⁵	Ratio: 1.38 Failed ⁵
Decimal(2128866)	Ratio: 2.02 Failed ⁵	Ratio: 1.75 Failed ⁵	Ratio: 1.52 Failed ⁵	Ratio: 1.32 Failed ⁵	Ratio: 1.15 Failed ⁵		Ratio: 1.14 Failed ⁵	Ratio: 1.20 Failed ⁵
Decimal(618466)	Ratio: 2.30 Failed ⁵	Ratio: 2.00 Failed ⁵	Ratio: 1.73 Failed ⁵	Ratio: 1.50 Failed ⁵	Ratio: 1.31 Failed ⁵	Ratio: 1.14 Failed ⁵		Ratio: 1.05 Failed ⁵
Decimal(27362)	Ratio: 2.42 Failed ⁵	Ratio: 2.10 Failed ⁵	Ratio: 1.83 Failed ⁵	Ratio: 1.58 Failed ⁵	Ratio: 1.38 Failed ⁵	Ratio: 1.20 Failed ⁵	Ratio: 1.05 Failed ⁵

Color Bucket