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

Download Main Colors: GIMP Palette, AdobeĀ® ASE Palette, Tailwind CSS Palette

Download All Colors: GIMP Palette, AdobeĀ® ASE Palette, Tailwind CSS Palette


CMYK(0.00, 0.40, 0.40, 0.50)

Download: GIMP Palette, AdobeĀ® ASE Palette, Tailwind CSS Palette


CMYK(0.00, 0.30, 0.30, 0.50)

Download: GIMP Palette, AdobeĀ® ASE Palette, Tailwind CSS Palette


CMYK(0.00, 0.20, 0.20, 0.50)

Download: GIMP Palette, AdobeĀ® ASE Palette, Tailwind CSS Palette


CMYK(0.00, 0.10, 0.10, 0.50)

Download: GIMP Palette, AdobeĀ® ASE Palette, Tailwind CSS Palette


CMYK(0.00, 0.00, 0.00, 0.50)

Download: GIMP Palette, AdobeĀ® ASE Palette, Tailwind CSS Palette


CMYK(0.09, 0.00, 0.00, 0.45)

Download: GIMP Palette, AdobeĀ® ASE Palette, Tailwind CSS Palette


CMYK(0.16, 0.00, 0.00, 0.40)

Download: GIMP Palette, AdobeĀ® ASE Palette, Tailwind CSS Palette


CMYK(0.23, 0.00, 0.00, 0.35)

Download: GIMP Palette, AdobeĀ® ASE Palette, Tailwind CSS Palette


CMYK(0.28, 0.00, 0.00, 0.30)

Download: GIMP Palette, AdobeĀ® ASE Palette, Tailwind CSS Palette


CMYK(0.33, 0.00, 0.00, 0.25)

Download: GIMP Palette, AdobeĀ® ASE Palette, Tailwind CSS Palette


CSS Code

.main-color-1{ color:rgb(128, 77, 77); }
.main-bg-color-1{ background-color:rgb(128, 77, 77); }
.main-color-2{ color:rgb(128, 89, 89); }
.main-bg-color-2{ background-color:rgb(128, 89, 89); }
.main-color-3{ color:rgb(128, 102, 102); }
.main-bg-color-3{ background-color:rgb(128, 102, 102); }
.main-color-4{ color:rgb(128, 115, 115); }
.main-bg-color-4{ background-color:rgb(128, 115, 115); }
.main-color-5{ color:rgb(128, 128, 128); }
.main-bg-color-5{ background-color:rgb(128, 128, 128); }
.main-color-6{ color:rgb(128, 140, 140); }
.main-bg-color-6{ background-color:rgb(128, 140, 140); }
.main-color-7{ color:rgb(128, 153, 153); }
.main-bg-color-7{ background-color:rgb(128, 153, 153); }
.main-color-8{ color:rgb(128, 166, 166); }
.main-bg-color-8{ background-color:rgb(128, 166, 166); }
.main-color-9{ color:rgb(128, 179, 179); }
.main-bg-color-9{ background-color:rgb(128, 179, 179); }
.main-color-10{ color:rgb(128, 191, 191); }
.main-bg-color-10{ background-color:rgb(128, 191, 191); }
.color-1-100{ color:rgb(236, 223, 223); }
.bg-color-1-100{ background-color:rgb(236, 223, 223); }
.color-1-200{ color:rgb(217, 191, 191); }
.bg-color-1-200{ background-color:rgb(217, 191, 191); }
.color-1-300{ color:rgb(198, 159, 159); }
.bg-color-1-300{ background-color:rgb(198, 159, 159); }
.color-1-400{ color:rgb(178, 128, 128); }
.bg-color-1-400{ background-color:rgb(178, 128, 128); }
.color-1-500{ color:rgb(159, 96, 96); }
.bg-color-1-500{ background-color:rgb(159, 96, 96); }
.color-1-600{ color:rgb(128, 77, 77); }
.bg-color-1-600{ background-color:rgb(128, 77, 77); }
.color-1-700{ color:rgb(96, 57, 57); }
.bg-color-1-700{ background-color:rgb(96, 57, 57); }
.color-1-800{ color:rgb(64, 38, 38); }
.bg-color-1-800{ background-color:rgb(64, 38, 38); }
.color-1-900{ color:rgb(32, 19, 19); }
.bg-color-1-900{ background-color:rgb(32, 19, 19); }
.color-2-100{ color:rgb(234, 225, 225); }
.bg-color-2-100{ background-color:rgb(234, 225, 225); }
.color-2-200{ color:rgb(213, 195, 195); }
.bg-color-2-200{ background-color:rgb(213, 195, 195); }
.color-2-300{ color:rgb(192, 165, 165); }
.bg-color-2-300{ background-color:rgb(192, 165, 165); }
.color-2-400{ color:rgb(171, 135, 135); }
.bg-color-2-400{ background-color:rgb(171, 135, 135); }
.color-2-500{ color:rgb(150, 105, 105); }
.bg-color-2-500{ background-color:rgb(150, 105, 105); }
.color-2-600{ color:rgb(128, 89, 89); }
.bg-color-2-600{ background-color:rgb(128, 89, 89); }
.color-2-700{ color:rgb(90, 63, 63); }
.bg-color-2-700{ background-color:rgb(90, 63, 63); }
.color-2-800{ color:rgb(60, 42, 42); }
.bg-color-2-800{ background-color:rgb(60, 42, 42); }
.color-2-900{ color:rgb(30, 21, 21); }
.bg-color-2-900{ background-color:rgb(30, 21, 21); }
.color-3-100{ color:rgb(232, 227, 227); }
.bg-color-3-100{ background-color:rgb(232, 227, 227); }
.color-3-200{ color:rgb(210, 198, 198); }
.bg-color-3-200{ background-color:rgb(210, 198, 198); }
.color-3-300{ color:rgb(187, 170, 170); }
.bg-color-3-300{ background-color:rgb(187, 170, 170); }
.color-3-400{ color:rgb(165, 141, 141); }
.bg-color-3-400{ background-color:rgb(165, 141, 141); }
.color-3-500{ color:rgb(128, 102, 102); }
.bg-color-3-500{ background-color:rgb(128, 102, 102); }
.color-3-600{ color:rgb(114, 90, 90); }
.bg-color-3-600{ background-color:rgb(114, 90, 90); }
.color-3-700{ color:rgb(85, 68, 68); }
.bg-color-3-700{ background-color:rgb(85, 68, 68); }
.color-3-800{ color:rgb(57, 45, 45); }
.bg-color-3-800{ background-color:rgb(57, 45, 45); }
.color-3-900{ color:rgb(28, 23, 23); }
.bg-color-3-900{ background-color:rgb(28, 23, 23); }
.color-4-100{ color:rgb(231, 228, 228); }
.bg-color-4-100{ background-color:rgb(231, 228, 228); }
.color-4-200{ color:rgb(207, 201, 201); }
.bg-color-4-200{ background-color:rgb(207, 201, 201); }
.color-4-300{ color:rgb(183, 174, 174); }
.bg-color-4-300{ background-color:rgb(183, 174, 174); }
.color-4-400{ color:rgb(158, 148, 148); }
.bg-color-4-400{ background-color:rgb(158, 148, 148); }
.color-4-500{ color:rgb(128, 115, 115); }
.bg-color-4-500{ background-color:rgb(128, 115, 115); }
.color-4-600{ color:rgb(107, 97, 97); }
.bg-color-4-600{ background-color:rgb(107, 97, 97); }
.color-4-700{ color:rgb(81, 72, 72); }
.bg-color-4-700{ background-color:rgb(81, 72, 72); }
.color-4-800{ color:rgb(54, 48, 48); }
.bg-color-4-800{ background-color:rgb(54, 48, 48); }
.color-4-900{ color:rgb(27, 24, 24); }
.bg-color-4-900{ background-color:rgb(27, 24, 24); }
.color-5-100{ color:rgb(230, 230, 230); }
.bg-color-5-100{ background-color:rgb(230, 230, 230); }
.color-5-200{ color:rgb(204, 204, 204); }
.bg-color-5-200{ background-color:rgb(204, 204, 204); }
.color-5-300{ color:rgb(179, 179, 179); }
.bg-color-5-300{ background-color:rgb(179, 179, 179); }
.color-5-400{ color:rgb(153, 153, 153); }
.bg-color-5-400{ background-color:rgb(153, 153, 153); }
.color-5-500{ color:rgb(128, 128, 128); }
.bg-color-5-500{ background-color:rgb(128, 128, 128); }
.color-5-600{ color:rgb(102, 102, 102); }
.bg-color-5-600{ background-color:rgb(102, 102, 102); }
.color-5-700{ color:rgb(77, 77, 77); }
.bg-color-5-700{ background-color:rgb(77, 77, 77); }
.color-5-800{ color:rgb(51, 51, 51); }
.bg-color-5-800{ background-color:rgb(51, 51, 51); }
.color-5-900{ color:rgb(25, 25, 25); }
.bg-color-5-900{ background-color:rgb(25, 25, 25); }
.color-6-100{ color:rgb(228, 231, 231); }
.bg-color-6-100{ background-color:rgb(228, 231, 231); }
.color-6-200{ color:rgb(201, 207, 207); }
.bg-color-6-200{ background-color:rgb(201, 207, 207); }
.color-6-300{ color:rgb(175, 182, 182); }
.bg-color-6-300{ background-color:rgb(175, 182, 182); }
.color-6-400{ color:rgb(148, 158, 158); }
.bg-color-6-400{ background-color:rgb(148, 158, 158); }
.color-6-500{ color:rgb(128, 140, 140); }
.bg-color-6-500{ background-color:rgb(128, 140, 140); }
.color-6-600{ color:rgb(97, 107, 107); }
.bg-color-6-600{ background-color:rgb(97, 107, 107); }
.color-6-700{ color:rgb(73, 80, 80); }
.bg-color-6-700{ background-color:rgb(73, 80, 80); }
.color-6-800{ color:rgb(48, 54, 54); }
.bg-color-6-800{ background-color:rgb(48, 54, 54); }
.color-6-900{ color:rgb(24, 27, 27); }
.bg-color-6-900{ background-color:rgb(24, 27, 27); }
.color-7-100{ color:rgb(227, 232, 232); }
.bg-color-7-100{ background-color:rgb(227, 232, 232); }
.color-7-200{ color:rgb(198, 210, 210); }
.bg-color-7-200{ background-color:rgb(198, 210, 210); }
.color-7-300{ color:rgb(170, 187, 187); }
.bg-color-7-300{ background-color:rgb(170, 187, 187); }
.color-7-400{ color:rgb(128, 153, 153); }
.bg-color-7-400{ background-color:rgb(128, 153, 153); }
.color-7-500{ color:rgb(114, 141, 141); }
.bg-color-7-500{ background-color:rgb(114, 141, 141); }
.color-7-600{ color:rgb(91, 113, 113); }
.bg-color-7-600{ background-color:rgb(91, 113, 113); }
.color-7-700{ color:rgb(68, 85, 85); }
.bg-color-7-700{ background-color:rgb(68, 85, 85); }
.color-7-800{ color:rgb(45, 57, 57); }
.bg-color-7-800{ background-color:rgb(45, 57, 57); }
.color-7-900{ color:rgb(23, 28, 28); }
.bg-color-7-900{ background-color:rgb(23, 28, 28); }
.color-8-100{ color:rgb(225, 234, 234); }
.bg-color-8-100{ background-color:rgb(225, 234, 234); }
.color-8-200{ color:rgb(195, 213, 213); }
.bg-color-8-200{ background-color:rgb(195, 213, 213); }
.color-8-300{ color:rgb(165, 192, 192); }
.bg-color-8-300{ background-color:rgb(165, 192, 192); }
.color-8-400{ color:rgb(128, 166, 166); }
.bg-color-8-400{ background-color:rgb(128, 166, 166); }
.color-8-500{ color:rgb(105, 150, 150); }
.bg-color-8-500{ background-color:rgb(105, 150, 150); }
.color-8-600{ color:rgb(84, 120, 120); }
.bg-color-8-600{ background-color:rgb(84, 120, 120); }
.color-8-700{ color:rgb(63, 90, 90); }
.bg-color-8-700{ background-color:rgb(63, 90, 90); }
.color-8-800{ color:rgb(42, 60, 60); }
.bg-color-8-800{ background-color:rgb(42, 60, 60); }
.color-8-900{ color:rgb(21, 30, 30); }
.bg-color-8-900{ background-color:rgb(21, 30, 30); }
.color-9-100{ color:rgb(223, 236, 236); }
.bg-color-9-100{ background-color:rgb(223, 236, 236); }
.color-9-200{ color:rgb(191, 217, 217); }
.bg-color-9-200{ background-color:rgb(191, 217, 217); }
.color-9-300{ color:rgb(159, 198, 198); }
.bg-color-9-300{ background-color:rgb(159, 198, 198); }
.color-9-400{ color:rgb(128, 179, 179); }
.bg-color-9-400{ background-color:rgb(128, 179, 179); }
.color-9-500{ color:rgb(95, 160, 160); }
.bg-color-9-500{ background-color:rgb(95, 160, 160); }
.color-9-600{ color:rgb(76, 128, 128); }
.bg-color-9-600{ background-color:rgb(76, 128, 128); }
.color-9-700{ color:rgb(57, 96, 96); }
.bg-color-9-700{ background-color:rgb(57, 96, 96); }
.color-9-800{ color:rgb(38, 64, 64); }
.bg-color-9-800{ background-color:rgb(38, 64, 64); }
.color-9-900{ color:rgb(19, 32, 32); }
.bg-color-9-900{ background-color:rgb(19, 32, 32); }
.color-10-100{ color:rgb(221, 238, 238); }
.bg-color-10-100{ background-color:rgb(221, 238, 238); }
.color-10-200{ color:rgb(187, 221, 221); }
.bg-color-10-200{ background-color:rgb(187, 221, 221); }
.color-10-300{ color:rgb(153, 204, 204); }
.bg-color-10-300{ background-color:rgb(153, 204, 204); }
.color-10-400{ color:rgb(128, 191, 191); }
.bg-color-10-400{ background-color:rgb(128, 191, 191); }
.color-10-500{ color:rgb(85, 170, 170); }
.bg-color-10-500{ background-color:rgb(85, 170, 170); }
.color-10-600{ color:rgb(68, 136, 136); }
.bg-color-10-600{ background-color:rgb(68, 136, 136); }
.color-10-700{ color:rgb(51, 102, 102); }
.bg-color-10-700{ background-color:rgb(51, 102, 102); }
.color-10-800{ color:rgb(34, 68, 68); }
.bg-color-10-800{ background-color:rgb(34, 68, 68); }
.color-10-900{ color:rgb(17, 34, 34); }
.bg-color-10-900{ background-color:rgb(17, 34, 34); }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
  CMYK(0.00, 0.40, 0.40, 0.50)CMYK(0.00, 0.30, 0.30, 0.50)CMYK(0.00, 0.20, 0.20, 0.50)CMYK(0.00, 0.10, 0.10, 0.50)CMYK(0.00, 0.00, 0.00, 0.50)CMYK(0.09, 0.00, 0.00, 0.45)CMYK(0.16, 0.00, 0.00, 0.40)CMYK(0.23, 0.00, 0.00, 0.35)CMYK(0.28, 0.00, 0.00, 0.30)CMYK(0.33, 0.00, 0.00, 0.25)
            

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.
CMYK(0.00, 0.40, 0.40, 0.50)  Ratio: 1.13
Failed 5
Ratio: 1.30
Failed 5
Ratio: 1.50
Failed 5
Ratio: 1.72
Failed 5
Ratio: 1.96
Failed 5
Ratio: 2.25
Failed 5
Ratio: 2.57
Failed 5
Ratio: 2.92
Failed 5
Ratio: 3.28
AA 18pt 2
CMYK(0.00, 0.30, 0.30, 0.50) Ratio: 1.13
Failed 5
 Ratio: 1.15
Failed 5
Ratio: 1.32
Failed 5
Ratio: 1.52
Failed 5
Ratio: 1.73
Failed 5
Ratio: 1.99
Failed 5
Ratio: 2.27
Failed 5
Ratio: 2.58
Failed 5
Ratio: 2.90
Failed 5
CMYK(0.00, 0.20, 0.20, 0.50) Ratio: 1.30
Failed 5
Ratio: 1.15
Failed 5
 Ratio: 1.15
Failed 5
Ratio: 1.33
Failed 5
Ratio: 1.51
Failed 5
Ratio: 1.73
Failed 5
Ratio: 1.98
Failed 5
Ratio: 2.25
Failed 5
Ratio: 2.52
Failed 5
CMYK(0.00, 0.10, 0.10, 0.50) Ratio: 1.50
Failed 5
Ratio: 1.32
Failed 5
Ratio: 1.15
Failed 5
 Ratio: 1.15
Failed 5
Ratio: 1.31
Failed 5
Ratio: 1.50
Failed 5
Ratio: 1.72
Failed 5
Ratio: 1.95
Failed 5
Ratio: 2.19
Failed 5
CMYK(0.00, 0.00, 0.00, 0.50) Ratio: 1.72
Failed 5
Ratio: 1.52
Failed 5
Ratio: 1.33
Failed 5
Ratio: 1.15
Failed 5
 Ratio: 1.14
Failed 5
Ratio: 1.30
Failed 5
Ratio: 1.49
Failed 5
Ratio: 1.70
Failed 5
Ratio: 1.90
Failed 5
CMYK(0.09, 0.00, 0.00, 0.45) Ratio: 1.96
Failed 5
Ratio: 1.73
Failed 5
Ratio: 1.51
Failed 5
Ratio: 1.31
Failed 5
Ratio: 1.14
Failed 5
 Ratio: 1.15
Failed 5
Ratio: 1.31
Failed 5
Ratio: 1.49
Failed 5
Ratio: 1.67
Failed 5
CMYK(0.16, 0.00, 0.00, 0.40) Ratio: 2.25
Failed 5
Ratio: 1.99
Failed 5
Ratio: 1.73
Failed 5
Ratio: 1.50
Failed 5
Ratio: 1.30
Failed 5
Ratio: 1.15
Failed 5
 Ratio: 1.14
Failed 5
Ratio: 1.30
Failed 5
Ratio: 1.46
Failed 5
CMYK(0.23, 0.00, 0.00, 0.35) Ratio: 2.57
Failed 5
Ratio: 2.27
Failed 5
Ratio: 1.98
Failed 5
Ratio: 1.72
Failed 5
Ratio: 1.49
Failed 5
Ratio: 1.31
Failed 5
Ratio: 1.14
Failed 5
 Ratio: 1.14
Failed 5
Ratio: 1.28
Failed 5
CMYK(0.28, 0.00, 0.00, 0.30) Ratio: 2.92
Failed 5
Ratio: 2.58
Failed 5
Ratio: 2.25
Failed 5
Ratio: 1.95
Failed 5
Ratio: 1.70
Failed 5
Ratio: 1.49
Failed 5
Ratio: 1.30
Failed 5
Ratio: 1.14
Failed 5
 Ratio: 1.12
Failed 5
CMYK(0.33, 0.00, 0.00, 0.25) Ratio: 3.28
AA 18pt 2
Ratio: 2.90
Failed 5
Ratio: 2.52
Failed 5
Ratio: 2.19
Failed 5
Ratio: 1.90
Failed 5
Ratio: 1.67
Failed 5
Ratio: 1.46
Failed 5
Ratio: 1.28
Failed 5
Ratio: 1.12
Failed 5
 

    FontExplorer X - Makes Everyone an Expert

Advertisment: These links are affiliate (commission) links. If you click on such a link and buy something on that website, I get a commission. For you, the price does not change.