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
Hex(0AC29A)

Main Color 2
Hex(00C298)

Hex(0AC29A) dark washed spring green

100
Hex(CFFDF3)

200
Hex(9EFAE6)

300
Hex(6DF8DA)

400
Hex(3DF5CD)

500
Hex(0DF3C0)

600 * Your Color
Hex(0AC29A)

700
Hex(089273)

800
Hex(05614D)

900
Hex(033127)

Hex(00C298) dark washed spring green

100
Hex(CCFFF4)

200
Hex(99FFE9)

300
Hex(66FFDE)

400
Hex(33FFD3)

500
Hex(00FFC8)

600 * Your Color
Hex(00C298)

700
Hex(009978)

800
Hex(006650)

900
Hex(003328)

CSS Code

.main-color-1{ color:#0AC29A; }
.main-bg-color-1{ background-color:#0AC29A; }
.main-color-2{ color:#00C298; }
.main-bg-color-2{ background-color:#00C298; }

.color-1-100{ color:#CFFDF3; }
.bg-color-1-100{ background-color:#CFFDF3; }
.color-1-200{ color:#9EFAE6; }
.bg-color-1-200{ background-color:#9EFAE6; }
.color-1-300{ color:#6DF8DA; }
.bg-color-1-300{ background-color:#6DF8DA; }
.color-1-400{ color:#3DF5CD; }
.bg-color-1-400{ background-color:#3DF5CD; }
.color-1-500{ color:#0DF3C0; }
.bg-color-1-500{ background-color:#0DF3C0; }
.color-1-600{ color:#0AC29A; }
.bg-color-1-600{ background-color:#0AC29A; }
.color-1-700{ color:#089273; }
.bg-color-1-700{ background-color:#089273; }
.color-1-800{ color:#05614D; }
.bg-color-1-800{ background-color:#05614D; }
.color-1-900{ color:#033127; }
.bg-color-1-900{ background-color:#033127; }

.color-2-100{ color:#CCFFF4; }
.bg-color-2-100{ background-color:#CCFFF4; }
.color-2-200{ color:#99FFE9; }
.bg-color-2-200{ background-color:#99FFE9; }
.color-2-300{ color:#66FFDE; }
.bg-color-2-300{ background-color:#66FFDE; }
.color-2-400{ color:#33FFD3; }
.bg-color-2-400{ background-color:#33FFD3; }
.color-2-500{ color:#00FFC8; }
.bg-color-2-500{ background-color:#00FFC8; }
.color-2-600{ color:#00C298; }
.bg-color-2-600{ background-color:#00C298; }
.color-2-700{ color:#009978; }
.bg-color-2-700{ background-color:#009978; }
.color-2-800{ color:#006650; }
.bg-color-2-800{ background-color:#006650; }
.color-2-900{ color:#003328; }
.bg-color-2-900{ background-color:#003328; }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Hex(0AC29A)	Hex(00C298)

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.
Hex(0AC29A)		Ratio: 1.00 Failed ⁵
Hex(00C298)	Ratio: 1.00 Failed ⁵

Color Bucket

Hex(0AC29A) dark washed spring green

Hex(00C298) dark washed spring green

CSS Code

Menu

Support