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

Main Color 2
Decimal(7047910)

Decimal(15124331)

100
Decimal(16314067)

200
Decimal(15785640)

300 * Your Color
Decimal(15124331)

400
Decimal(14859600)

500
Decimal(14330917)

600
Decimal(11504157)

700
Decimal(8611606)

800
Decimal(5719311)

900
Decimal(2892295)

Decimal(7047910)

100
Decimal(13884920)

200
Decimal(11057904)

300 * Your Color
Decimal(7047910)

400
Decimal(5273058)

500
Decimal(2446298)

600
Decimal(1917615)

700
Decimal(1454723)

800
Decimal(991575)

900
Decimal(463148)

CSS Code

.main-color-1{ color:#E6C76B; }
.main-bg-color-1{ background-color:#E6C76B; }
.main-color-2{ color:#6B8AE6; }
.main-bg-color-2{ background-color:#6B8AE6; }

.color-1-100{ color:#F8EED3; }
.bg-color-1-100{ background-color:#F8EED3; }
.color-1-200{ color:#F0DEA8; }
.bg-color-1-200{ background-color:#F0DEA8; }
.color-1-300{ color:#E6C76B; }
.bg-color-1-300{ background-color:#E6C76B; }
.color-1-400{ color:#E2BD50; }
.bg-color-1-400{ background-color:#E2BD50; }
.color-1-500{ color:#DAAC25; }
.bg-color-1-500{ background-color:#DAAC25; }
.color-1-600{ color:#AF8A1D; }
.bg-color-1-600{ background-color:#AF8A1D; }
.color-1-700{ color:#836716; }
.bg-color-1-700{ background-color:#836716; }
.color-1-800{ color:#57450F; }
.bg-color-1-800{ background-color:#57450F; }
.color-1-900{ color:#2C2207; }
.bg-color-1-900{ background-color:#2C2207; }

.color-2-100{ color:#D3DDF8; }
.bg-color-2-100{ background-color:#D3DDF8; }
.color-2-200{ color:#A8BAF0; }
.bg-color-2-200{ background-color:#A8BAF0; }
.color-2-300{ color:#6B8AE6; }
.bg-color-2-300{ background-color:#6B8AE6; }
.color-2-400{ color:#5075E2; }
.bg-color-2-400{ background-color:#5075E2; }
.color-2-500{ color:#2553DA; }
.bg-color-2-500{ background-color:#2553DA; }
.color-2-600{ color:#1D42AF; }
.bg-color-2-600{ background-color:#1D42AF; }
.color-2-700{ color:#163283; }
.bg-color-2-700{ background-color:#163283; }
.color-2-800{ color:#0F2157; }
.bg-color-2-800{ background-color:#0F2157; }
.color-2-900{ color:#07112C; }
.bg-color-2-900{ background-color:#07112C; }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Decimal(15124331)	Decimal(7047910)

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(15124331)		Ratio: 1.99 Failed ⁵
Decimal(7047910)	Ratio: 1.99 Failed ⁵

Color Bucket

Decimal(15124331)

Decimal(7047910)

CSS Code

Menu

Support