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

Main Color 2
Decimal(8900315)

Main Color 3
Decimal(7123647)

Main Color 4
Decimal(5281700)

Main Color 5
Decimal(3440009)

Main Color 6
Decimal(1074288)

Main Color 7
Decimal(19543)

Main Color 8
Decimal(13632)

Main Color 9
Decimal(8234)

Main Color 10
Decimal(278)

Decimal(10742519)

100
Decimal(13694203)

200 * Your Color
Decimal(10742519)

300
Decimal(7528435)

400
Decimal(4445423)

500
Decimal(1362411)

600
Decimal(1089980)

700
Decimal(817549)

800
Decimal(545118)

900
Decimal(272431)

Decimal(8900315)

100
Decimal(14217203)

200
Decimal(11657191)

300 * Your Color
Decimal(8900315)

400
Decimal(6471632)

500
Decimal(3911620)

600
Decimal(3116189)

700
Decimal(2320758)

800
Decimal(1590862)

900
Decimal(795431)

Decimal(7123647)

100
Decimal(14413040)

200
Decimal(12114656)

300
Decimal(9750481)

400 * Your Color
Decimal(7123647)

500
Decimal(5087922)

600
Decimal(4096654)

700
Decimal(3039595)

800
Decimal(2048327)

900
Decimal(991268)

Decimal(5281700)

100
Decimal(14544110)

200
Decimal(12245214)

300
Decimal(10012109)

400
Decimal(7778748)

500 * Your Color
Decimal(5281700)

600
Decimal(4423305)

700
Decimal(3301223)

800
Decimal(2178885)

900
Decimal(1122338)

Decimal(3440009)

100
Decimal(14348017)

200
Decimal(11918563)

300
Decimal(9489365)

400
Decimal(7060167)

500
Decimal(4630969)

600 * Your Color
Decimal(3440009)

700
Decimal(2778479)

800
Decimal(1852234)

900
Decimal(926245)

Decimal(1074288)

100
Decimal(13825273)

200
Decimal(10938866)

300
Decimal(7986924)

400
Decimal(5034726)

500
Decimal(2148319)

600
Decimal(1679283)

700 * Your Color
Decimal(1074288)

800
Decimal(872537)

900
Decimal(403501)

Decimal(19543)

100
Decimal(13433343)

200
Decimal(10089215)

300
Decimal(6745343)

400
Decimal(3401215)

500
Decimal(57343)

600
Decimal(45772)

700
Decimal(34457)

800 * Your Color
Decimal(19543)

900
Decimal(11571)

Decimal(13632)

100
Decimal(13432575)

200
Decimal(10087935)

300
Decimal(6743551)

400
Decimal(3398911)

500
Decimal(54271)

600
Decimal(43468)

700
Decimal(32665)

800
Decimal(21606)

900 * Your Color
Decimal(13632)

Decimal(8234)

100
Decimal(13431807)

200
Decimal(10086399)

300
Decimal(6740991)

400
Decimal(3395327)

500
Decimal(49919)

600
Decimal(39884)

700
Decimal(30105)

800
Decimal(20070)

900 * Your Color
Decimal(8234)

Decimal(278)

100
Decimal(13422335)

200
Decimal(10067711)

300
Decimal(6712831)

400
Decimal(3357951)

500
Decimal(3327)

600
Decimal(2508)

700
Decimal(1945)

800
Decimal(1382)

900
Decimal(563)

CSS Code

.main-color-1{ color:#A3EAF7; }
.main-bg-color-1{ background-color:#A3EAF7; }
.main-color-2{ color:#87CEDB; }
.main-bg-color-2{ background-color:#87CEDB; }
.main-color-3{ color:#6CB2BF; }
.main-bg-color-3{ background-color:#6CB2BF; }
.main-color-4{ color:#5097A4; }
.main-bg-color-4{ background-color:#5097A4; }
.main-color-5{ color:#347D89; }
.main-bg-color-5{ background-color:#347D89; }
.main-color-6{ color:#106470; }
.main-bg-color-6{ background-color:#106470; }
.main-color-7{ color:#004C57; }
.main-bg-color-7{ background-color:#004C57; }
.main-color-8{ color:#003540; }
.main-bg-color-8{ background-color:#003540; }
.main-color-9{ color:#00202A; }
.main-bg-color-9{ background-color:#00202A; }
.main-color-10{ color:#000116; }
.main-bg-color-10{ background-color:#000116; }

.color-1-100{ color:#D0F4FB; }
.bg-color-1-100{ background-color:#D0F4FB; }
.color-1-200{ color:#A3EAF7; }
.bg-color-1-200{ background-color:#A3EAF7; }
.color-1-300{ color:#72DFF3; }
.bg-color-1-300{ background-color:#72DFF3; }
.color-1-400{ color:#43D4EF; }
.bg-color-1-400{ background-color:#43D4EF; }
.color-1-500{ color:#14C9EB; }
.bg-color-1-500{ background-color:#14C9EB; }
.color-1-600{ color:#10A1BC; }
.bg-color-1-600{ background-color:#10A1BC; }
.color-1-700{ color:#0C798D; }
.bg-color-1-700{ background-color:#0C798D; }
.color-1-800{ color:#08515E; }
.bg-color-1-800{ background-color:#08515E; }
.color-1-900{ color:#04282F; }
.bg-color-1-900{ background-color:#04282F; }

.color-2-100{ color:#D8EFF3; }
.bg-color-2-100{ background-color:#D8EFF3; }
.color-2-200{ color:#B1DFE7; }
.bg-color-2-200{ background-color:#B1DFE7; }
.color-2-300{ color:#87CEDB; }
.bg-color-2-300{ background-color:#87CEDB; }
.color-2-400{ color:#62BFD0; }
.bg-color-2-400{ background-color:#62BFD0; }
.color-2-500{ color:#3BAFC4; }
.bg-color-2-500{ background-color:#3BAFC4; }
.color-2-600{ color:#2F8C9D; }
.bg-color-2-600{ background-color:#2F8C9D; }
.color-2-700{ color:#236976; }
.bg-color-2-700{ background-color:#236976; }
.color-2-800{ color:#18464E; }
.bg-color-2-800{ background-color:#18464E; }
.color-2-900{ color:#0C2327; }
.bg-color-2-900{ background-color:#0C2327; }

.color-3-100{ color:#DBECF0; }
.bg-color-3-100{ background-color:#DBECF0; }
.color-3-200{ color:#B8DAE0; }
.bg-color-3-200{ background-color:#B8DAE0; }
.color-3-300{ color:#94C7D1; }
.bg-color-3-300{ background-color:#94C7D1; }
.color-3-400{ color:#6CB2BF; }
.bg-color-3-400{ background-color:#6CB2BF; }
.color-3-500{ color:#4DA2B2; }
.bg-color-3-500{ background-color:#4DA2B2; }
.color-3-600{ color:#3E828E; }
.bg-color-3-600{ background-color:#3E828E; }
.color-3-700{ color:#2E616B; }
.bg-color-3-700{ background-color:#2E616B; }
.color-3-800{ color:#1F4147; }
.bg-color-3-800{ background-color:#1F4147; }
.color-3-900{ color:#0F2024; }
.bg-color-3-900{ background-color:#0F2024; }

.color-4-100{ color:#DDECEE; }
.bg-color-4-100{ background-color:#DDECEE; }
.color-4-200{ color:#BAD8DE; }
.bg-color-4-200{ background-color:#BAD8DE; }
.color-4-300{ color:#98C5CD; }
.bg-color-4-300{ background-color:#98C5CD; }
.color-4-400{ color:#76B1BC; }
.bg-color-4-400{ background-color:#76B1BC; }
.color-4-500{ color:#5097A4; }
.bg-color-4-500{ background-color:#5097A4; }
.color-4-600{ color:#437E89; }
.bg-color-4-600{ background-color:#437E89; }
.color-4-700{ color:#325F67; }
.bg-color-4-700{ background-color:#325F67; }
.color-4-800{ color:#213F45; }
.bg-color-4-800{ background-color:#213F45; }
.color-4-900{ color:#112022; }
.bg-color-4-900{ background-color:#112022; }

.color-5-100{ color:#DAEEF1; }
.bg-color-5-100{ background-color:#DAEEF1; }
.color-5-200{ color:#B5DCE3; }
.bg-color-5-200{ background-color:#B5DCE3; }
.color-5-300{ color:#90CBD5; }
.bg-color-5-300{ background-color:#90CBD5; }
.color-5-400{ color:#6BBAC7; }
.bg-color-5-400{ background-color:#6BBAC7; }
.color-5-500{ color:#46A9B9; }
.bg-color-5-500{ background-color:#46A9B9; }
.color-5-600{ color:#347D89; }
.bg-color-5-600{ background-color:#347D89; }
.color-5-700{ color:#2A656F; }
.bg-color-5-700{ background-color:#2A656F; }
.color-5-800{ color:#1C434A; }
.bg-color-5-800{ background-color:#1C434A; }
.color-5-900{ color:#0E2225; }
.bg-color-5-900{ background-color:#0E2225; }

.color-6-100{ color:#D2F4F9; }
.bg-color-6-100{ background-color:#D2F4F9; }
.color-6-200{ color:#A6E9F2; }
.bg-color-6-200{ background-color:#A6E9F2; }
.color-6-300{ color:#79DEEC; }
.bg-color-6-300{ background-color:#79DEEC; }
.color-6-400{ color:#4CD2E6; }
.bg-color-6-400{ background-color:#4CD2E6; }
.color-6-500{ color:#20C7DF; }
.bg-color-6-500{ background-color:#20C7DF; }
.color-6-600{ color:#199FB3; }
.bg-color-6-600{ background-color:#199FB3; }
.color-6-700{ color:#106470; }
.bg-color-6-700{ background-color:#106470; }
.color-6-800{ color:#0D5059; }
.bg-color-6-800{ background-color:#0D5059; }
.color-6-900{ color:#06282D; }
.bg-color-6-900{ background-color:#06282D; }

.color-7-100{ color:#CCF9FF; }
.bg-color-7-100{ background-color:#CCF9FF; }
.color-7-200{ color:#99F2FF; }
.bg-color-7-200{ background-color:#99F2FF; }
.color-7-300{ color:#66ECFF; }
.bg-color-7-300{ background-color:#66ECFF; }
.color-7-400{ color:#33E5FF; }
.bg-color-7-400{ background-color:#33E5FF; }
.color-7-500{ color:#00DFFF; }
.bg-color-7-500{ background-color:#00DFFF; }
.color-7-600{ color:#00B2CC; }
.bg-color-7-600{ background-color:#00B2CC; }
.color-7-700{ color:#008699; }
.bg-color-7-700{ background-color:#008699; }
.color-7-800{ color:#004C57; }
.bg-color-7-800{ background-color:#004C57; }
.color-7-900{ color:#002D33; }
.bg-color-7-900{ background-color:#002D33; }

.color-8-100{ color:#CCF6FF; }
.bg-color-8-100{ background-color:#CCF6FF; }
.color-8-200{ color:#99EDFF; }
.bg-color-8-200{ background-color:#99EDFF; }
.color-8-300{ color:#66E5FF; }
.bg-color-8-300{ background-color:#66E5FF; }
.color-8-400{ color:#33DCFF; }
.bg-color-8-400{ background-color:#33DCFF; }
.color-8-500{ color:#00D3FF; }
.bg-color-8-500{ background-color:#00D3FF; }
.color-8-600{ color:#00A9CC; }
.bg-color-8-600{ background-color:#00A9CC; }
.color-8-700{ color:#007F99; }
.bg-color-8-700{ background-color:#007F99; }
.color-8-800{ color:#005466; }
.bg-color-8-800{ background-color:#005466; }
.color-8-900{ color:#003540; }
.bg-color-8-900{ background-color:#003540; }

.color-9-100{ color:#CCF3FF; }
.bg-color-9-100{ background-color:#CCF3FF; }
.color-9-200{ color:#99E7FF; }
.bg-color-9-200{ background-color:#99E7FF; }
.color-9-300{ color:#66DBFF; }
.bg-color-9-300{ background-color:#66DBFF; }
.color-9-400{ color:#33CEFF; }
.bg-color-9-400{ background-color:#33CEFF; }
.color-9-500{ color:#00C2FF; }
.bg-color-9-500{ background-color:#00C2FF; }
.color-9-600{ color:#009BCC; }
.bg-color-9-600{ background-color:#009BCC; }
.color-9-700{ color:#007599; }
.bg-color-9-700{ background-color:#007599; }
.color-9-800{ color:#004E66; }
.bg-color-9-800{ background-color:#004E66; }
.color-9-900{ color:#00202A; }
.bg-color-9-900{ background-color:#00202A; }

.color-10-100{ color:#CCCEFF; }
.bg-color-10-100{ background-color:#CCCEFF; }
.color-10-200{ color:#999EFF; }
.bg-color-10-200{ background-color:#999EFF; }
.color-10-300{ color:#666DFF; }
.bg-color-10-300{ background-color:#666DFF; }
.color-10-400{ color:#333CFF; }
.bg-color-10-400{ background-color:#333CFF; }
.color-10-500{ color:#000CFF; }
.bg-color-10-500{ background-color:#000CFF; }
.color-10-600{ color:#0009CC; }
.bg-color-10-600{ background-color:#0009CC; }
.color-10-700{ color:#000799; }
.bg-color-10-700{ background-color:#000799; }
.color-10-800{ color:#000566; }
.bg-color-10-800{ background-color:#000566; }
.color-10-900{ color:#000233; }
.bg-color-10-900{ background-color:#000233; }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Decimal(10742519)	Decimal(8900315)	Decimal(7123647)	Decimal(5281700)	Decimal(3440009)	Decimal(1074288)	Decimal(19543)	Decimal(13632)	Decimal(8234)	Decimal(278)

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(10742519)		Ratio: 1.32 Failed ⁵	Ratio: 1.79 Failed ⁵	Ratio: 2.49 Failed ⁵	Ratio: 3.53 AA 18pt ²	Ratio: 5.09 AA ¹ AAA 18pt ⁴	Ratio: 7.22 Passed ⁶	Ratio: 9.90 Passed ⁶	Ratio: 12.64 Passed ⁶	Ratio: 15.42 Passed ⁶
Decimal(8900315)	Ratio: 1.32 Failed ⁵		Ratio: 1.36 Failed ⁵	Ratio: 1.88 Failed ⁵	Ratio: 2.68 Failed ⁵	Ratio: 3.86 AA 18pt ²	Ratio: 5.47 AA ¹ AAA 18pt ⁴	Ratio: 7.50 Passed ⁶	Ratio: 9.58 Passed ⁶	Ratio: 11.69 Passed ⁶
Decimal(7123647)	Ratio: 1.79 Failed ⁵	Ratio: 1.36 Failed ⁵		Ratio: 1.39 Failed ⁵	Ratio: 1.97 Failed ⁵	Ratio: 2.84 Failed ⁵	Ratio: 4.03 AA 18pt ²	Ratio: 5.53 AA ¹ AAA 18pt ⁴	Ratio: 7.06 Passed ⁶	Ratio: 8.62 Passed ⁶
Decimal(5281700)	Ratio: 2.49 Failed ⁵	Ratio: 1.88 Failed ⁵	Ratio: 1.39 Failed ⁵		Ratio: 1.42 Failed ⁵	Ratio: 2.05 Failed ⁵	Ratio: 2.90 Failed ⁵	Ratio: 3.98 AA 18pt ²	Ratio: 5.08 AA ¹ AAA 18pt ⁴	Ratio: 6.20 AA ¹ AAA 18pt ⁴
Decimal(3440009)	Ratio: 3.53 AA 18pt ²	Ratio: 2.68 Failed ⁵	Ratio: 1.97 Failed ⁵	Ratio: 1.42 Failed ⁵		Ratio: 1.44 Failed ⁵	Ratio: 2.05 Failed ⁵	Ratio: 2.80 Failed ⁵	Ratio: 3.58 AA 18pt ²	Ratio: 4.37 AA 18pt ²
Decimal(1074288)	Ratio: 5.09 AA ¹ AAA 18pt ⁴	Ratio: 3.86 AA 18pt ²	Ratio: 2.84 Failed ⁵	Ratio: 2.05 Failed ⁵	Ratio: 1.44 Failed ⁵		Ratio: 1.42 Failed ⁵	Ratio: 1.94 Failed ⁵	Ratio: 2.48 Failed ⁵	Ratio: 3.03 AA 18pt ²
Decimal(19543)	Ratio: 7.22 Passed ⁶	Ratio: 5.47 AA ¹ AAA 18pt ⁴	Ratio: 4.03 AA 18pt ²	Ratio: 2.90 Failed ⁵	Ratio: 2.05 Failed ⁵	Ratio: 1.42 Failed ⁵		Ratio: 1.37 Failed ⁵	Ratio: 1.75 Failed ⁵	Ratio: 2.14 Failed ⁵
Decimal(13632)	Ratio: 9.90 Passed ⁶	Ratio: 7.50 Passed ⁶	Ratio: 5.53 AA ¹ AAA 18pt ⁴	Ratio: 3.98 AA 18pt ²	Ratio: 2.80 Failed ⁵	Ratio: 1.94 Failed ⁵	Ratio: 1.37 Failed ⁵		Ratio: 1.28 Failed ⁵	Ratio: 1.56 Failed ⁵
Decimal(8234)	Ratio: 12.64 Passed ⁶	Ratio: 9.58 Passed ⁶	Ratio: 7.06 Passed ⁶	Ratio: 5.08 AA ¹ AAA 18pt ⁴	Ratio: 3.58 AA 18pt ²	Ratio: 2.48 Failed ⁵	Ratio: 1.75 Failed ⁵	Ratio: 1.28 Failed ⁵		Ratio: 1.22 Failed ⁵
Decimal(278)	Ratio: 15.42 Passed ⁶	Ratio: 11.69 Passed ⁶	Ratio: 8.62 Passed ⁶	Ratio: 6.20 AA ¹ AAA 18pt ⁴	Ratio: 4.37 AA 18pt ²	Ratio: 3.03 AA 18pt ²	Ratio: 2.14 Failed ⁵	Ratio: 1.56 Failed ⁵	Ratio: 1.22 Failed ⁵

Color Bucket