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

Main Color 2
Decimal(10125462)

Main Color 3
Decimal(10129560)

Main Color 4
Decimal(10133403)

Main Color 5
Decimal(10137502)

Main Color 6
Decimal(10141344)

Main Color 7
Decimal(10145187)

Main Color 8
Decimal(10149285)

Main Color 9
Decimal(10153128)

Main Color 10
Decimal(10157227)

Decimal(10121619)

100
Decimal(15393256)

200
Decimal(14009298)

300
Decimal(12560059)

400
Decimal(11176100)

500 * Your Color
Decimal(10121619)

600
Decimal(7820657)

700
Decimal(5849173)

800
Decimal(3942969)

900
Decimal(1971484)

Decimal(10125462)

100
Decimal(15262696)

200
Decimal(13813456)

300
Decimal(12298937)

400 * Your Color
Decimal(10125462)

500
Decimal(9335178)

600
Decimal(7494254)

700
Decimal(5588051)

800
Decimal(3747127)

900
Decimal(1840924)

Decimal(10129560)

100
Decimal(15197414)

200
Decimal(13552333)

300
Decimal(11972533)

400 * Your Color
Decimal(10129560)

500
Decimal(8812931)

600
Decimal(7037289)

700
Decimal(5261647)

800
Decimal(3486004)

900
Decimal(1775642)

Decimal(10133403)

100
Decimal(15066853)

200
Decimal(13356491)

300
Decimal(11646129)

400 * Your Color
Decimal(10133403)

500
Decimal(8160126)

600
Decimal(6515044)

700
Decimal(4935243)

800
Decimal(3290162)

900
Decimal(1645081)

Decimal(10137502)

100
Decimal(14936292)

200
Decimal(13030088)

300
Decimal(11189165)

400 * Your Color
Decimal(10137502)

500
Decimal(7442038)

600
Decimal(5927519)

700
Decimal(4478279)

800
Decimal(2963759)

900
Decimal(1514520)

Decimal(10141344)

100
Decimal(14740450)

200
Decimal(12703685)

300 * Your Color
Decimal(10141344)

400
Decimal(8630154)

500
Decimal(6593389)

600
Decimal(5274711)

700
Decimal(3956033)

800
Decimal(2637356)

900
Decimal(1318678)

Decimal(10145187)

100
Decimal(14544608)

200
Decimal(12312001)

300 * Your Color
Decimal(10145187)

400
Decimal(7846787)

500
Decimal(5548900)

600
Decimal(4491344)

700
Decimal(3368508)

800
Decimal(2245672)

900
Decimal(1122836)

Decimal(10149285)

100
Decimal(14283485)

200
Decimal(11789755)

300 * Your Color
Decimal(10149285)

400
Decimal(6737015)

500
Decimal(4243285)

600
Decimal(3381572)

700
Decimal(2585139)

800
Decimal(1723426)

900
Decimal(861713)

Decimal(10153128)

100
Decimal(13957082)

200 * Your Color
Decimal(10153128)

300
Decimal(8316816)

400
Decimal(5496683)

500
Decimal(2676550)

600
Decimal(2141240)

700
Decimal(1605930)

800
Decimal(1070620)

900
Decimal(535310)

Decimal(10157227)

100
Decimal(13500118)

200 * Your Color
Decimal(10157227)

300
Decimal(7011203)

400
Decimal(3799386)

500
Decimal(522289)

600
Decimal(443943)

700
Decimal(300317)

800
Decimal(221972)

900
Decimal(78346)

CSS Code

.main-color-1{ color:#9A7193; }
.main-bg-color-1{ background-color:#9A7193; }
.main-color-2{ color:#9A8096; }
.main-bg-color-2{ background-color:#9A8096; }
.main-color-3{ color:#9A9098; }
.main-bg-color-3{ background-color:#9A9098; }
.main-color-4{ color:#9A9F9B; }
.main-bg-color-4{ background-color:#9A9F9B; }
.main-color-5{ color:#9AAF9E; }
.main-bg-color-5{ background-color:#9AAF9E; }
.main-color-6{ color:#9ABEA0; }
.main-bg-color-6{ background-color:#9ABEA0; }
.main-color-7{ color:#9ACDA3; }
.main-bg-color-7{ background-color:#9ACDA3; }
.main-color-8{ color:#9ADDA5; }
.main-bg-color-8{ background-color:#9ADDA5; }
.main-color-9{ color:#9AECA8; }
.main-bg-color-9{ background-color:#9AECA8; }
.main-color-10{ color:#9AFCAB; }
.main-bg-color-10{ background-color:#9AFCAB; }

.color-1-100{ color:#EAE1E8; }
.bg-color-1-100{ background-color:#EAE1E8; }
.color-1-200{ color:#D5C3D2; }
.bg-color-1-200{ background-color:#D5C3D2; }
.color-1-300{ color:#BFA6BB; }
.bg-color-1-300{ background-color:#BFA6BB; }
.color-1-400{ color:#AA88A4; }
.bg-color-1-400{ background-color:#AA88A4; }
.color-1-500{ color:#9A7193; }
.bg-color-1-500{ background-color:#9A7193; }
.color-1-600{ color:#775571; }
.bg-color-1-600{ background-color:#775571; }
.color-1-700{ color:#594055; }
.bg-color-1-700{ background-color:#594055; }
.color-1-800{ color:#3C2A39; }
.bg-color-1-800{ background-color:#3C2A39; }
.color-1-900{ color:#1E151C; }
.bg-color-1-900{ background-color:#1E151C; }

.color-2-100{ color:#E8E3E8; }
.bg-color-2-100{ background-color:#E8E3E8; }
.color-2-200{ color:#D2C6D0; }
.bg-color-2-200{ background-color:#D2C6D0; }
.color-2-300{ color:#BBAAB9; }
.bg-color-2-300{ background-color:#BBAAB9; }
.color-2-400{ color:#9A8096; }
.bg-color-2-400{ background-color:#9A8096; }
.color-2-500{ color:#8E718A; }
.bg-color-2-500{ background-color:#8E718A; }
.color-2-600{ color:#725A6E; }
.bg-color-2-600{ background-color:#725A6E; }
.color-2-700{ color:#554453; }
.bg-color-2-700{ background-color:#554453; }
.color-2-800{ color:#392D37; }
.bg-color-2-800{ background-color:#392D37; }
.color-2-900{ color:#1C171C; }
.bg-color-2-900{ background-color:#1C171C; }

.color-3-100{ color:#E7E4E6; }
.bg-color-3-100{ background-color:#E7E4E6; }
.color-3-200{ color:#CECACD; }
.bg-color-3-200{ background-color:#CECACD; }
.color-3-300{ color:#B6AFB5; }
.bg-color-3-300{ background-color:#B6AFB5; }
.color-3-400{ color:#9A9098; }
.bg-color-3-400{ background-color:#9A9098; }
.color-3-500{ color:#867983; }
.bg-color-3-500{ background-color:#867983; }
.color-3-600{ color:#6B6169; }
.bg-color-3-600{ background-color:#6B6169; }
.color-3-700{ color:#50494F; }
.bg-color-3-700{ background-color:#50494F; }
.color-3-800{ color:#353134; }
.bg-color-3-800{ background-color:#353134; }
.color-3-900{ color:#1B181A; }
.bg-color-3-900{ background-color:#1B181A; }

.color-4-100{ color:#E5E6E5; }
.bg-color-4-100{ background-color:#E5E6E5; }
.color-4-200{ color:#CBCDCB; }
.bg-color-4-200{ background-color:#CBCDCB; }
.color-4-300{ color:#B1B4B1; }
.bg-color-4-300{ background-color:#B1B4B1; }
.color-4-400{ color:#9A9F9B; }
.bg-color-4-400{ background-color:#9A9F9B; }
.color-4-500{ color:#7C837E; }
.bg-color-4-500{ background-color:#7C837E; }
.color-4-600{ color:#636964; }
.bg-color-4-600{ background-color:#636964; }
.color-4-700{ color:#4B4E4B; }
.bg-color-4-700{ background-color:#4B4E4B; }
.color-4-800{ color:#323432; }
.bg-color-4-800{ background-color:#323432; }
.color-4-900{ color:#191A19; }
.bg-color-4-900{ background-color:#191A19; }

.color-5-100{ color:#E3E8E4; }
.bg-color-5-100{ background-color:#E3E8E4; }
.color-5-200{ color:#C6D2C8; }
.bg-color-5-200{ background-color:#C6D2C8; }
.color-5-300{ color:#AABBAD; }
.bg-color-5-300{ background-color:#AABBAD; }
.color-5-400{ color:#9AAF9E; }
.bg-color-5-400{ background-color:#9AAF9E; }
.color-5-500{ color:#718E76; }
.bg-color-5-500{ background-color:#718E76; }
.color-5-600{ color:#5A725F; }
.bg-color-5-600{ background-color:#5A725F; }
.color-5-700{ color:#445547; }
.bg-color-5-700{ background-color:#445547; }
.color-5-800{ color:#2D392F; }
.bg-color-5-800{ background-color:#2D392F; }
.color-5-900{ color:#171C18; }
.bg-color-5-900{ background-color:#171C18; }

.color-6-100{ color:#E0EBE2; }
.bg-color-6-100{ background-color:#E0EBE2; }
.color-6-200{ color:#C1D7C5; }
.bg-color-6-200{ background-color:#C1D7C5; }
.color-6-300{ color:#9ABEA0; }
.bg-color-6-300{ background-color:#9ABEA0; }
.color-6-400{ color:#83AF8A; }
.bg-color-6-400{ background-color:#83AF8A; }
.color-6-500{ color:#649B6D; }
.bg-color-6-500{ background-color:#649B6D; }
.color-6-600{ color:#507C57; }
.bg-color-6-600{ background-color:#507C57; }
.color-6-700{ color:#3C5D41; }
.bg-color-6-700{ background-color:#3C5D41; }
.color-6-800{ color:#283E2C; }
.bg-color-6-800{ background-color:#283E2C; }
.color-6-900{ color:#141F16; }
.bg-color-6-900{ background-color:#141F16; }

.color-7-100{ color:#DDEEE0; }
.bg-color-7-100{ background-color:#DDEEE0; }
.color-7-200{ color:#BBDDC1; }
.bg-color-7-200{ background-color:#BBDDC1; }
.color-7-300{ color:#9ACDA3; }
.bg-color-7-300{ background-color:#9ACDA3; }
.color-7-400{ color:#77BB83; }
.bg-color-7-400{ background-color:#77BB83; }
.color-7-500{ color:#54AB64; }
.bg-color-7-500{ background-color:#54AB64; }
.color-7-600{ color:#448850; }
.bg-color-7-600{ background-color:#448850; }
.color-7-700{ color:#33663C; }
.bg-color-7-700{ background-color:#33663C; }
.color-7-800{ color:#224428; }
.bg-color-7-800{ background-color:#224428; }
.color-7-900{ color:#112214; }
.bg-color-7-900{ background-color:#112214; }

.color-8-100{ color:#D9F2DD; }
.bg-color-8-100{ background-color:#D9F2DD; }
.color-8-200{ color:#B3E5BB; }
.bg-color-8-200{ background-color:#B3E5BB; }
.color-8-300{ color:#9ADDA5; }
.bg-color-8-300{ background-color:#9ADDA5; }
.color-8-400{ color:#66CC77; }
.bg-color-8-400{ background-color:#66CC77; }
.color-8-500{ color:#40BF55; }
.bg-color-8-500{ background-color:#40BF55; }
.color-8-600{ color:#339944; }
.bg-color-8-600{ background-color:#339944; }
.color-8-700{ color:#277233; }
.bg-color-8-700{ background-color:#277233; }
.color-8-800{ color:#1A4C22; }
.bg-color-8-800{ background-color:#1A4C22; }
.color-8-900{ color:#0D2611; }
.bg-color-8-900{ background-color:#0D2611; }

.color-9-100{ color:#D4F7DA; }
.bg-color-9-100{ background-color:#D4F7DA; }
.color-9-200{ color:#9AECA8; }
.bg-color-9-200{ background-color:#9AECA8; }
.color-9-300{ color:#7EE790; }
.bg-color-9-300{ background-color:#7EE790; }
.color-9-400{ color:#53DF6B; }
.bg-color-9-400{ background-color:#53DF6B; }
.color-9-500{ color:#28D746; }
.bg-color-9-500{ background-color:#28D746; }
.color-9-600{ color:#20AC38; }
.bg-color-9-600{ background-color:#20AC38; }
.color-9-700{ color:#18812A; }
.bg-color-9-700{ background-color:#18812A; }
.color-9-800{ color:#10561C; }
.bg-color-9-800{ background-color:#10561C; }
.color-9-900{ color:#082B0E; }
.bg-color-9-900{ background-color:#082B0E; }

.color-10-100{ color:#CDFED6; }
.bg-color-10-100{ background-color:#CDFED6; }
.color-10-200{ color:#9AFCAB; }
.bg-color-10-200{ background-color:#9AFCAB; }
.color-10-300{ color:#6AFB83; }
.bg-color-10-300{ background-color:#6AFB83; }
.color-10-400{ color:#39F95A; }
.bg-color-10-400{ background-color:#39F95A; }
.color-10-500{ color:#07F831; }
.bg-color-10-500{ background-color:#07F831; }
.color-10-600{ color:#06C627; }
.bg-color-10-600{ background-color:#06C627; }
.color-10-700{ color:#04951D; }
.bg-color-10-700{ background-color:#04951D; }
.color-10-800{ color:#036314; }
.bg-color-10-800{ background-color:#036314; }
.color-10-900{ color:#01320A; }
.bg-color-10-900{ background-color:#01320A; }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Decimal(10121619)	Decimal(10125462)	Decimal(10129560)	Decimal(10133403)	Decimal(10137502)	Decimal(10141344)	Decimal(10145187)	Decimal(10149285)	Decimal(10153128)	Decimal(10157227)

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(10121619)		Ratio: 1.14 Failed ⁵	Ratio: 1.32 Failed ⁵	Ratio: 1.51 Failed ⁵	Ratio: 1.75 Failed ⁵	Ratio: 1.99 Failed ⁵	Ratio: 2.26 Failed ⁵	Ratio: 2.57 Failed ⁵	Ratio: 2.90 Failed ⁵	Ratio: 3.27 AA 18pt ²
Decimal(10125462)	Ratio: 1.14 Failed ⁵		Ratio: 1.15 Failed ⁵	Ratio: 1.32 Failed ⁵	Ratio: 1.52 Failed ⁵	Ratio: 1.74 Failed ⁵	Ratio: 1.97 Failed ⁵	Ratio: 2.25 Failed ⁵	Ratio: 2.53 Failed ⁵	Ratio: 2.86 Failed ⁵
Decimal(10129560)	Ratio: 1.32 Failed ⁵	Ratio: 1.15 Failed ⁵		Ratio: 1.15 Failed ⁵	Ratio: 1.32 Failed ⁵	Ratio: 1.50 Failed ⁵	Ratio: 1.71 Failed ⁵	Ratio: 1.95 Failed ⁵	Ratio: 2.19 Failed ⁵	Ratio: 2.48 Failed ⁵
Decimal(10133403)	Ratio: 1.51 Failed ⁵	Ratio: 1.32 Failed ⁵	Ratio: 1.15 Failed ⁵		Ratio: 1.15 Failed ⁵	Ratio: 1.31 Failed ⁵	Ratio: 1.49 Failed ⁵	Ratio: 1.70 Failed ⁵	Ratio: 1.91 Failed ⁵	Ratio: 2.16 Failed ⁵
Decimal(10137502)	Ratio: 1.75 Failed ⁵	Ratio: 1.52 Failed ⁵	Ratio: 1.32 Failed ⁵	Ratio: 1.15 Failed ⁵		Ratio: 1.14 Failed ⁵	Ratio: 1.29 Failed ⁵	Ratio: 1.47 Failed ⁵	Ratio: 1.66 Failed ⁵	Ratio: 1.88 Failed ⁵
Decimal(10141344)	Ratio: 1.99 Failed ⁵	Ratio: 1.74 Failed ⁵	Ratio: 1.50 Failed ⁵	Ratio: 1.31 Failed ⁵	Ratio: 1.14 Failed ⁵		Ratio: 1.14 Failed ⁵	Ratio: 1.29 Failed ⁵	Ratio: 1.46 Failed ⁵	Ratio: 1.65 Failed ⁵
Decimal(10145187)	Ratio: 2.26 Failed ⁵	Ratio: 1.97 Failed ⁵	Ratio: 1.71 Failed ⁵	Ratio: 1.49 Failed ⁵	Ratio: 1.29 Failed ⁵	Ratio: 1.14 Failed ⁵		Ratio: 1.14 Failed ⁵	Ratio: 1.28 Failed ⁵	Ratio: 1.45 Failed ⁵
Decimal(10149285)	Ratio: 2.57 Failed ⁵	Ratio: 2.25 Failed ⁵	Ratio: 1.95 Failed ⁵	Ratio: 1.70 Failed ⁵	Ratio: 1.47 Failed ⁵	Ratio: 1.29 Failed ⁵	Ratio: 1.14 Failed ⁵		Ratio: 1.13 Failed ⁵	Ratio: 1.27 Failed ⁵
Decimal(10153128)	Ratio: 2.90 Failed ⁵	Ratio: 2.53 Failed ⁵	Ratio: 2.19 Failed ⁵	Ratio: 1.91 Failed ⁵	Ratio: 1.66 Failed ⁵	Ratio: 1.46 Failed ⁵	Ratio: 1.28 Failed ⁵	Ratio: 1.13 Failed ⁵		Ratio: 1.13 Failed ⁵
Decimal(10157227)	Ratio: 3.27 AA 18pt ²	Ratio: 2.86 Failed ⁵	Ratio: 2.48 Failed ⁵	Ratio: 2.16 Failed ⁵	Ratio: 1.88 Failed ⁵	Ratio: 1.65 Failed ⁵	Ratio: 1.45 Failed ⁵	Ratio: 1.27 Failed ⁵	Ratio: 1.13 Failed ⁵

Color Bucket