Color Bucket

The color bucket can contain a maximum of 10 colors and is used to auto-create color palettes for each of these colors based on the lightness.

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

CIELCh(58, 55.463, 22.491)



CIELCh(48, 55.594, 22.585) dark muted red



CIELCh(38, 55.772, 22.552)



CIELCh(28, 55.461, 22.357)



CIELCh(21, 49.395, 29.519)



CIELCh(14, 40.336, 31.871)



CIELCh(8, 30.516, 23.325)



CSS Code

.main-color-1{ color:rgb(227, 97, 105); }
.main-bg-color-1{ background-color:rgb(227, 97, 105); }
.main-color-2{ color:rgb(197, 70, 81); }
.main-bg-color-2{ background-color:rgb(197, 70, 81); }
.main-color-3{ color:rgb(167, 41, 58); }
.main-bg-color-3{ background-color:rgb(167, 41, 58); }
.main-color-4{ color:rgb(137, 1, 37); }
.main-bg-color-4{ background-color:rgb(137, 1, 37); }
.main-color-5{ color:rgb(108, 0, 17); }
.main-bg-color-5{ background-color:rgb(108, 0, 17); }
.main-color-6{ color:rgb(79, 0, 0); }
.main-bg-color-6{ background-color:rgb(79, 0, 0); }
.main-color-7{ color:rgb(58, 0, 2); }
.main-bg-color-7{ background-color:rgb(58, 0, 2); }

.color-1-100{ color:rgb(247, 212, 214); }
.bg-color-1-100{ background-color:rgb(247, 212, 214); }
.color-1-200{ color:rgb(240, 168, 173); }
.bg-color-1-200{ background-color:rgb(240, 168, 173); }
.color-1-300{ color:rgb(232, 125, 132); }
.bg-color-1-300{ background-color:rgb(232, 125, 132); }
.color-1-400{ color:rgb(227, 97, 105); }
.bg-color-1-400{ background-color:rgb(227, 97, 105); }
.color-1-500{ color:rgb(217, 38, 49); }
.bg-color-1-500{ background-color:rgb(217, 38, 49); }
.color-1-600{ color:rgb(173, 31, 39); }
.bg-color-1-600{ background-color:rgb(173, 31, 39); }
.color-1-700{ color:rgb(130, 23, 30); }
.bg-color-1-700{ background-color:rgb(130, 23, 30); }
.color-1-800{ color:rgb(87, 15, 20); }
.bg-color-1-800{ background-color:rgb(87, 15, 20); }
.color-1-900{ color:rgb(43, 8, 10); }
.bg-color-1-900{ background-color:rgb(43, 8, 10); }

.color-2-100{ color:rgb(243, 216, 218); }
.bg-color-2-100{ background-color:rgb(243, 216, 218); }
.color-2-200{ color:rgb(231, 177, 182); }
.bg-color-2-200{ background-color:rgb(231, 177, 182); }
.color-2-300{ color:rgb(218, 139, 145); }
.bg-color-2-300{ background-color:rgb(218, 139, 145); }
.color-2-400{ color:rgb(206, 100, 109); }
.bg-color-2-400{ background-color:rgb(206, 100, 109); }
.color-2-500{ color:rgb(197, 70, 81); }
.bg-color-2-500{ background-color:rgb(197, 70, 81); }
.color-2-600{ color:rgb(155, 49, 58); }
.bg-color-2-600{ background-color:rgb(155, 49, 58); }
.color-2-700{ color:rgb(116, 37, 43); }
.bg-color-2-700{ background-color:rgb(116, 37, 43); }
.color-2-800{ color:rgb(78, 24, 29); }
.bg-color-2-800{ background-color:rgb(78, 24, 29); }
.color-2-900{ color:rgb(39, 12, 14); }
.bg-color-2-900{ background-color:rgb(39, 12, 14); }

.color-3-100{ color:rgb(245, 214, 218); }
.bg-color-3-100{ background-color:rgb(245, 214, 218); }
.color-3-200{ color:rgb(235, 173, 181); }
.bg-color-3-200{ background-color:rgb(235, 173, 181); }
.color-3-300{ color:rgb(225, 132, 145); }
.bg-color-3-300{ background-color:rgb(225, 132, 145); }
.color-3-400{ color:rgb(215, 91, 108); }
.bg-color-3-400{ background-color:rgb(215, 91, 108); }
.color-3-500{ color:rgb(205, 50, 71); }
.bg-color-3-500{ background-color:rgb(205, 50, 71); }
.color-3-600{ color:rgb(167, 41, 58); }
.bg-color-3-600{ background-color:rgb(167, 41, 58); }
.color-3-700{ color:rgb(123, 30, 43); }
.bg-color-3-700{ background-color:rgb(123, 30, 43); }
.color-3-800{ color:rgb(82, 20, 28); }
.bg-color-3-800{ background-color:rgb(82, 20, 28); }
.color-3-900{ color:rgb(41, 10, 14); }
.bg-color-3-900{ background-color:rgb(41, 10, 14); }

.color-4-100{ color:rgb(255, 204, 218); }
.bg-color-4-100{ background-color:rgb(255, 204, 218); }
.color-4-200{ color:rgb(254, 154, 180); }
.bg-color-4-200{ background-color:rgb(254, 154, 180); }
.color-4-300{ color:rgb(254, 103, 143); }
.bg-color-4-300{ background-color:rgb(254, 103, 143); }
.color-4-400{ color:rgb(254, 52, 106); }
.bg-color-4-400{ background-color:rgb(254, 52, 106); }
.color-4-500{ color:rgb(253, 2, 68); }
.bg-color-4-500{ background-color:rgb(253, 2, 68); }
.color-4-600{ color:rgb(203, 2, 55); }
.bg-color-4-600{ background-color:rgb(203, 2, 55); }
.color-4-700{ color:rgb(137, 1, 37); }
.bg-color-4-700{ background-color:rgb(137, 1, 37); }
.color-4-800{ color:rgb(101, 1, 27); }
.bg-color-4-800{ background-color:rgb(101, 1, 27); }
.color-4-900{ color:rgb(51, 0, 14); }
.bg-color-4-900{ background-color:rgb(51, 0, 14); }

.color-5-100{ color:rgb(255, 204, 212); }
.bg-color-5-100{ background-color:rgb(255, 204, 212); }
.color-5-200{ color:rgb(255, 153, 169); }
.bg-color-5-200{ background-color:rgb(255, 153, 169); }
.color-5-300{ color:rgb(255, 102, 126); }
.bg-color-5-300{ background-color:rgb(255, 102, 126); }
.color-5-400{ color:rgb(255, 51, 83); }
.bg-color-5-400{ background-color:rgb(255, 51, 83); }
.color-5-500{ color:rgb(255, 0, 40); }
.bg-color-5-500{ background-color:rgb(255, 0, 40); }
.color-5-600{ color:rgb(204, 0, 32); }
.bg-color-5-600{ background-color:rgb(204, 0, 32); }
.color-5-700{ color:rgb(153, 0, 24); }
.bg-color-5-700{ background-color:rgb(153, 0, 24); }
.color-5-800{ color:rgb(108, 0, 17); }
.bg-color-5-800{ background-color:rgb(108, 0, 17); }
.color-5-900{ color:rgb(51, 0, 8); }
.bg-color-5-900{ background-color:rgb(51, 0, 8); }

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

.color-7-100{ color:rgb(255, 204, 206); }
.bg-color-7-100{ background-color:rgb(255, 204, 206); }
.color-7-200{ color:rgb(255, 153, 157); }
.bg-color-7-200{ background-color:rgb(255, 153, 157); }
.color-7-300{ color:rgb(255, 102, 107); }
.bg-color-7-300{ background-color:rgb(255, 102, 107); }
.color-7-400{ color:rgb(255, 51, 58); }
.bg-color-7-400{ background-color:rgb(255, 51, 58); }
.color-7-500{ color:rgb(255, 0, 9); }
.bg-color-7-500{ background-color:rgb(255, 0, 9); }
.color-7-600{ color:rgb(204, 0, 7); }
.bg-color-7-600{ background-color:rgb(204, 0, 7); }
.color-7-700{ color:rgb(153, 0, 5); }
.bg-color-7-700{ background-color:rgb(153, 0, 5); }
.color-7-800{ color:rgb(102, 0, 4); }
.bg-color-7-800{ background-color:rgb(102, 0, 4); }
.color-7-900{ color:rgb(58, 0, 2); }
.bg-color-7-900{ background-color:rgb(58, 0, 2); }
šŸ“‹ Copy Code
WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
  CIELCh(58, 55.463, 22.491)CIELCh(48, 55.594, 22.585)CIELCh(38, 55.772, 22.552)CIELCh(28, 55.461, 22.357)CIELCh(21, 49.395, 29.519)CIELCh(14, 40.336, 31.871)CIELCh(8, 30.516, 23.325)
         

Details can be found at https://www.w3.org/TR/WCAG20/.

1 AA
AA level of the Web Content Accessibility Guidelines (WCAG) 2.0 for any text size.
2 AA 18pt
AA level for large text above 18pt.
3 AAA
AAA level of the Web Content Accessibility Guidelines (WCAG) 2.0 for any text size.
4 AAA 18pt
AAA level for large text above 18pt.
5 Failed
Fails to comply with the Web Content Accessibility Guidelines (WCAG) 2.0.
6 Passed
Passes the AAA level of the Web Content Accessibility Guidelines (WCAG) 2.0 for all text sizes.
CIELCh(58, 55.463, 22.491)  Ratio: 1.41
Failed 5
Color Contrast Checker
Ratio: 2.05
Failed 5
Color Contrast Checker
Ratio: 2.95
Failed 5
Color Contrast Checker
Ratio: 3.76
AA 18pt 2
Color Contrast Checker
Ratio: 4.64
AA 1
AAA 18pt 4
Color Contrast Checker
Ratio: 5.23
AA 1
AAA 18pt 4
Color Contrast Checker
CIELCh(48, 55.594, 22.585) Ratio: 1.41
Failed 5
Color Contrast Checker
 Ratio: 1.45
Failed 5
Color Contrast Checker
Ratio: 2.09
Failed 5
Color Contrast Checker
Ratio: 2.65
Failed 5
Color Contrast Checker
Ratio: 3.28
AA 18pt 2
Color Contrast Checker
Ratio: 3.70
AA 18pt 2
Color Contrast Checker
CIELCh(38, 55.772, 22.552) Ratio: 2.05
Failed 5
Color Contrast Checker
Ratio: 1.45
Failed 5
Color Contrast Checker
 Ratio: 1.44
Failed 5
Color Contrast Checker
Ratio: 1.84
Failed 5
Color Contrast Checker
Ratio: 2.27
Failed 5
Color Contrast Checker
Ratio: 2.56
Failed 5
Color Contrast Checker
CIELCh(28, 55.461, 22.357) Ratio: 2.95
Failed 5
Color Contrast Checker
Ratio: 2.09
Failed 5
Color Contrast Checker
Ratio: 1.44
Failed 5
Color Contrast Checker
 Ratio: 1.27
Failed 5
Color Contrast Checker
Ratio: 1.57
Failed 5
Color Contrast Checker
Ratio: 1.77
Failed 5
Color Contrast Checker
CIELCh(21, 49.395, 29.519) Ratio: 3.76
AA 18pt 2
Color Contrast Checker
Ratio: 2.65
Failed 5
Color Contrast Checker
Ratio: 1.84
Failed 5
Color Contrast Checker
Ratio: 1.27
Failed 5
Color Contrast Checker
 Ratio: 1.24
Failed 5
Color Contrast Checker
Ratio: 1.39
Failed 5
Color Contrast Checker
CIELCh(14, 40.336, 31.871) Ratio: 4.64
AA 1
AAA 18pt 4
Color Contrast Checker
Ratio: 3.28
AA 18pt 2
Color Contrast Checker
Ratio: 2.27
Failed 5
Color Contrast Checker
Ratio: 1.57
Failed 5
Color Contrast Checker
Ratio: 1.24
Failed 5
Color Contrast Checker
 Ratio: 1.13
Failed 5
Color Contrast Checker
CIELCh(8, 30.516, 23.325) Ratio: 5.23
AA 1
AAA 18pt 4
Color Contrast Checker
Ratio: 3.70
AA 18pt 2
Color Contrast Checker
Ratio: 2.56
Failed 5
Color Contrast Checker
Ratio: 1.77
Failed 5
Color Contrast Checker
Ratio: 1.39
Failed 5
Color Contrast Checker
Ratio: 1.13
Failed 5
Color Contrast Checker