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(3B7EB9)

Main Color 2
Hex(C0D9F0)

Main Color 3
Hex(3BB976)

Main Color 4
Hex(5B6A78)

Main Color 5
Hex(F7F7F7)

Main Color 6
Hex(787878)

Hex(3B7EB9)

100
Hex(D8E6F3)

200
Hex(B2CEE6)

300
Hex(8BB5DA)

400
Hex(649CCE)

500 * Your Color
Hex(3B7EB9)

600
Hex(31699B)

700
Hex(254F74)

800
Hex(19354D)

900
Hex(0C1A27)

Hex(C0D9F0)

100
Hex(D6E6F5)

200 * Your Color
Hex(C0D9F0)

300
Hex(83B4E2)

400
Hex(5A9CD8)

500
Hex(3183CE)

600
Hex(2769A5)

700
Hex(1D4E7C)

800
Hex(143452)

900
Hex(0A1A29)

Hex(3BB976)

100
Hex(D8F3E5)

200
Hex(B2E6CA)

300
Hex(8BDAB0)

400
Hex(64CE96)

500 * Your Color
Hex(3BB976)

600
Hex(319B63)

700
Hex(25744A)

800
Hex(194D31)

900
Hex(0C2719)

Hex(5B6A78)

100
Hex(E2E6E9)

200
Hex(C5CCD3)

300
Hex(A8B3BD)

400
Hex(8B99A7)

500
Hex(6E8091)

600 * Your Color
Hex(5B6A78)

700
Hex(424D57)

800
Hex(2C333A)

900
Hex(161A1D)

Hex(F7F7F7)

100
Hex(E6E6E6)

200
Hex(CCCCCC)

300
Hex(B3B3B3)

400
Hex(999999)

500
Hex(808080)

600
Hex(666666)

700
Hex(4D4D4D)

800
Hex(333333)

900
Hex(1A1A1A)

Hex(787878)

100
Hex(E6E6E6)

200
Hex(CCCCCC)

300
Hex(B3B3B3)

400
Hex(999999)

500 * Your Color
Hex(787878)

600
Hex(666666)

700
Hex(4D4D4D)

800
Hex(333333)

900
Hex(1A1A1A)

CSS Code

.main-color-1{ color:#3B7EB9; }
.main-bg-color-1{ background-color:#3B7EB9; }
.main-color-2{ color:#C0D9F0; }
.main-bg-color-2{ background-color:#C0D9F0; }
.main-color-3{ color:#3BB976; }
.main-bg-color-3{ background-color:#3BB976; }
.main-color-4{ color:#5B6A78; }
.main-bg-color-4{ background-color:#5B6A78; }
.main-color-5{ color:#F7F7F7; }
.main-bg-color-5{ background-color:#F7F7F7; }
.main-color-6{ color:#787878; }
.main-bg-color-6{ background-color:#787878; }

.color-1-100{ color:#D8E6F3; }
.bg-color-1-100{ background-color:#D8E6F3; }
.color-1-200{ color:#B2CEE6; }
.bg-color-1-200{ background-color:#B2CEE6; }
.color-1-300{ color:#8BB5DA; }
.bg-color-1-300{ background-color:#8BB5DA; }
.color-1-400{ color:#649CCE; }
.bg-color-1-400{ background-color:#649CCE; }
.color-1-500{ color:#3B7EB9; }
.bg-color-1-500{ background-color:#3B7EB9; }
.color-1-600{ color:#31699B; }
.bg-color-1-600{ background-color:#31699B; }
.color-1-700{ color:#254F74; }
.bg-color-1-700{ background-color:#254F74; }
.color-1-800{ color:#19354D; }
.bg-color-1-800{ background-color:#19354D; }
.color-1-900{ color:#0C1A27; }
.bg-color-1-900{ background-color:#0C1A27; }

.color-2-100{ color:#D6E6F5; }
.bg-color-2-100{ background-color:#D6E6F5; }
.color-2-200{ color:#C0D9F0; }
.bg-color-2-200{ background-color:#C0D9F0; }
.color-2-300{ color:#83B4E2; }
.bg-color-2-300{ background-color:#83B4E2; }
.color-2-400{ color:#5A9CD8; }
.bg-color-2-400{ background-color:#5A9CD8; }
.color-2-500{ color:#3183CE; }
.bg-color-2-500{ background-color:#3183CE; }
.color-2-600{ color:#2769A5; }
.bg-color-2-600{ background-color:#2769A5; }
.color-2-700{ color:#1D4E7C; }
.bg-color-2-700{ background-color:#1D4E7C; }
.color-2-800{ color:#143452; }
.bg-color-2-800{ background-color:#143452; }
.color-2-900{ color:#0A1A29; }
.bg-color-2-900{ background-color:#0A1A29; }

.color-3-100{ color:#D8F3E5; }
.bg-color-3-100{ background-color:#D8F3E5; }
.color-3-200{ color:#B2E6CA; }
.bg-color-3-200{ background-color:#B2E6CA; }
.color-3-300{ color:#8BDAB0; }
.bg-color-3-300{ background-color:#8BDAB0; }
.color-3-400{ color:#64CE96; }
.bg-color-3-400{ background-color:#64CE96; }
.color-3-500{ color:#3BB976; }
.bg-color-3-500{ background-color:#3BB976; }
.color-3-600{ color:#319B63; }
.bg-color-3-600{ background-color:#319B63; }
.color-3-700{ color:#25744A; }
.bg-color-3-700{ background-color:#25744A; }
.color-3-800{ color:#194D31; }
.bg-color-3-800{ background-color:#194D31; }
.color-3-900{ color:#0C2719; }
.bg-color-3-900{ background-color:#0C2719; }

.color-4-100{ color:#E2E6E9; }
.bg-color-4-100{ background-color:#E2E6E9; }
.color-4-200{ color:#C5CCD3; }
.bg-color-4-200{ background-color:#C5CCD3; }
.color-4-300{ color:#A8B3BD; }
.bg-color-4-300{ background-color:#A8B3BD; }
.color-4-400{ color:#8B99A7; }
.bg-color-4-400{ background-color:#8B99A7; }
.color-4-500{ color:#6E8091; }
.bg-color-4-500{ background-color:#6E8091; }
.color-4-600{ color:#5B6A78; }
.bg-color-4-600{ background-color:#5B6A78; }
.color-4-700{ color:#424D57; }
.bg-color-4-700{ background-color:#424D57; }
.color-4-800{ color:#2C333A; }
.bg-color-4-800{ background-color:#2C333A; }
.color-4-900{ color:#161A1D; }
.bg-color-4-900{ background-color:#161A1D; }

.color-5-100{ color:#E6E6E6; }
.bg-color-5-100{ background-color:#E6E6E6; }
.color-5-200{ color:#CCCCCC; }
.bg-color-5-200{ background-color:#CCCCCC; }
.color-5-300{ color:#B3B3B3; }
.bg-color-5-300{ background-color:#B3B3B3; }
.color-5-400{ color:#999999; }
.bg-color-5-400{ background-color:#999999; }
.color-5-500{ color:#808080; }
.bg-color-5-500{ background-color:#808080; }
.color-5-600{ color:#666666; }
.bg-color-5-600{ background-color:#666666; }
.color-5-700{ color:#4D4D4D; }
.bg-color-5-700{ background-color:#4D4D4D; }
.color-5-800{ color:#333333; }
.bg-color-5-800{ background-color:#333333; }
.color-5-900{ color:#1A1A1A; }
.bg-color-5-900{ background-color:#1A1A1A; }

.color-6-100{ color:#E6E6E6; }
.bg-color-6-100{ background-color:#E6E6E6; }
.color-6-200{ color:#CCCCCC; }
.bg-color-6-200{ background-color:#CCCCCC; }
.color-6-300{ color:#B3B3B3; }
.bg-color-6-300{ background-color:#B3B3B3; }
.color-6-400{ color:#999999; }
.bg-color-6-400{ background-color:#999999; }
.color-6-500{ color:#787878; }
.bg-color-6-500{ background-color:#787878; }
.color-6-600{ color:#666666; }
.bg-color-6-600{ background-color:#666666; }
.color-6-700{ color:#4D4D4D; }
.bg-color-6-700{ background-color:#4D4D4D; }
.color-6-800{ color:#333333; }
.bg-color-6-800{ background-color:#333333; }
.color-6-900{ color:#1A1A1A; }
.bg-color-6-900{ background-color:#1A1A1A; }

WCAG Matrix

Download: PDF

Web Content Accessibility Guidelines (WCAG) 2.0 - Color Matrix.
	Hex(3B7EB9)	Hex(C0D9F0)	Hex(3BB976)	Hex(5B6A78)	Hex(F7F7F7)	Hex(787878)

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(3B7EB9)		Ratio: 2.96 Failed ⁵	Ratio: 1.72 Failed ⁵	Ratio: 1.29 Failed ⁵	Ratio: 4.02 AA 18pt ²	Ratio: 1.02 Failed ⁵
Hex(C0D9F0)	Ratio: 2.96 Failed ⁵		Ratio: 1.72 Failed ⁵	Ratio: 3.82 AA 18pt ²	Ratio: 1.36 Failed ⁵	Ratio: 3.03 AA 18pt ²
Hex(3BB976)	Ratio: 1.72 Failed ⁵	Ratio: 1.72 Failed ⁵		Ratio: 2.22 Failed ⁵	Ratio: 2.34 Failed ⁵	Ratio: 1.76 Failed ⁵
Hex(5B6A78)	Ratio: 1.29 Failed ⁵	Ratio: 3.82 AA 18pt ²	Ratio: 2.22 Failed ⁵		Ratio: 5.19 AA ¹ AAA 18pt ⁴	Ratio: 1.26 Failed ⁵
Hex(F7F7F7)	Ratio: 4.02 AA 18pt ²	Ratio: 1.36 Failed ⁵	Ratio: 2.34 Failed ⁵	Ratio: 5.19 AA ¹ AAA 18pt ⁴		Ratio: 4.12 AA 18pt ²
Hex(787878)	Ratio: 1.02 Failed ⁵	Ratio: 3.03 AA 18pt ²	Ratio: 1.76 Failed ⁵	Ratio: 1.26 Failed ⁵	Ratio: 4.12 AA 18pt ²

Color Bucket