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
CIELCh(99, 25.735, 108.225)

Main Color 2
CIELCh(99, 24.233, 108.340)

CIELCh(99, 25.735, 108.225)

100 * Your Color
CIELCh(99, 25.735, 108.225)

200
CIELCh(98, 50.696, 106.300)

300
CIELCh(98, 73.258, 104.580)

400
CIELCh(97, 89.977, 103.348)

500
CIELCh(97, 96.910, 102.852)

600
CIELCh(80, 81.911, 102.852)

700
CIELCh(61, 66.185, 102.852)

800
CIELCh(42, 49.451, 102.852)

900
CIELCh(20, 29.319, 103.655)

CIELCh(99, 24.233, 108.340)

100 * Your Color
CIELCh(99, 24.233, 108.340)

200
CIELCh(98, 50.696, 106.300)

300
CIELCh(98, 73.258, 104.580)

400
CIELCh(97, 89.977, 103.348)

500
CIELCh(97, 96.910, 102.852)

600
CIELCh(80, 81.911, 102.852)

700
CIELCh(61, 66.185, 102.852)

800
CIELCh(42, 49.451, 102.852)

900
CIELCh(20, 29.319, 103.655)

CSS Code

.main-color-1{ color:rgb(255, 255, 204); }
.main-bg-color-1{ background-color:rgb(255, 255, 204); }
.main-color-2{ color:rgb(255, 255, 207); }
.main-bg-color-2{ background-color:rgb(255, 255, 207); }

.color-1-100{ color:rgb(255, 255, 204); }
.bg-color-1-100{ background-color:rgb(255, 255, 204); }
.color-1-200{ color:rgb(255, 255, 153); }
.bg-color-1-200{ background-color:rgb(255, 255, 153); }
.color-1-300{ color:rgb(255, 255, 102); }
.bg-color-1-300{ background-color:rgb(255, 255, 102); }
.color-1-400{ color:rgb(255, 255, 51); }
.bg-color-1-400{ background-color:rgb(255, 255, 51); }
.color-1-500{ color:rgb(255, 255, 0); }
.bg-color-1-500{ background-color:rgb(255, 255, 0); }
.color-1-600{ color:rgb(204, 204, 0); }
.bg-color-1-600{ background-color:rgb(204, 204, 0); }
.color-1-700{ color:rgb(153, 153, 0); }
.bg-color-1-700{ background-color:rgb(153, 153, 0); }
.color-1-800{ color:rgb(102, 102, 0); }
.bg-color-1-800{ background-color:rgb(102, 102, 0); }
.color-1-900{ color:rgb(51, 51, 0); }
.bg-color-1-900{ background-color:rgb(51, 51, 0); }

.color-2-100{ color:rgb(255, 255, 207); }
.bg-color-2-100{ background-color:rgb(255, 255, 207); }
.color-2-200{ color:rgb(255, 255, 153); }
.bg-color-2-200{ background-color:rgb(255, 255, 153); }
.color-2-300{ color:rgb(255, 255, 102); }
.bg-color-2-300{ background-color:rgb(255, 255, 102); }
.color-2-400{ color:rgb(255, 255, 51); }
.bg-color-2-400{ background-color:rgb(255, 255, 51); }
.color-2-500{ color:rgb(255, 255, 0); }
.bg-color-2-500{ background-color:rgb(255, 255, 0); }
.color-2-600{ color:rgb(204, 204, 0); }
.bg-color-2-600{ background-color:rgb(204, 204, 0); }
.color-2-700{ color:rgb(153, 153, 0); }
.bg-color-2-700{ background-color:rgb(153, 153, 0); }
.color-2-800{ color:rgb(102, 102, 0); }
.bg-color-2-800{ background-color:rgb(102, 102, 0); }
.color-2-900{ color:rgb(51, 51, 0); }
.bg-color-2-900{ background-color:rgb(51, 51, 0); }

📋 Copy Code

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	CIELCh(99, 25.735, 108.225)	CIELCh(99, 24.233, 108.340)

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.
CIELCh(99, 25.735, 108.225)		Ratio: 1.00 Failed ⁵
CIELCh(99, 24.233, 108.340)	Ratio: 1.00 Failed ⁵

Color Bucket

CIELCh(99, 25.735, 108.225)

CIELCh(99, 24.233, 108.340)

CSS Code

Menu

Support