Cool · curated
Blueprint
Blueprint is a curated structured, calm, credible system designed to move from expressive brand color to dependable surface and text roles.
Color values
Blueprint Primary · primary
HEX #22577A
RGB 34, 87, 122
HSL 204°, 56%, 31%
On white 7.74:1 · on black 2.71:1
Blueprint Secondary · secondary
HEX #38A3A5
RGB 56, 163, 165
HSL 181°, 49%, 43%
On white 3.02:1 · on black 6.95:1
Blueprint Accent · accent
HEX #80ED99
RGB 128, 237, 153
HSL 134°, 75%, 72%
On white 1.45:1 · on black 14.49:1
Blueprint Background · background
HEX #F2F8F7
RGB 242, 248, 247
HSL 170°, 30%, 96%
On white 1.07:1 · on black 19.55:1
Blueprint Text · text
HEX #18262E
RGB 24, 38, 46
HSL 202°, 31%, 14%
On white 15.49:1 · on black 1.36:1
Text contrast between these colors
WCAG 2.2 asks for 4.5:1 for body text (AA), 3:1 for large text, and 7:1 for AAA. Strongest pairs first.
Need to fix a failing pair? Run it through the accessibility checker or browse more palettes.