Cobalt blue can bring a vivid, recognizable accent to a brand or interface. Its visibility in art and fashion is inspiration, not proof that software products have widely adopted it. This guide develops an original screen palette and checks how its values behave as text, action and surface tokens.
Yves Klein’s International Klein Blue is a registered pigment formula. The five HEX values here are original ColorIndicator sRGB choices, not an official IKB digital conversion or paint specification.
What to consider before using a saturated blue
- Give the blue a role: Deep #0038A8 can work as light-theme text or an action fill against the tested pale surfaces.
- Watch neighboring colors: Some blue-and-red combinations can produce a perceived depth effect called chromostereopsis for some viewers. Do not assume this happens with every cobalt interface; inspect your particular design and avoid relying on a visually uncomfortable pairing.
- Adapt for dark mode: Move from deep cobalt to a lighter blue token when the canvas becomes dark, and retest the pair.
A five-color cobalt-inspired digital palette
| Token role | Color | HEX | RGB | HSL | Suggested use |
|---|---|---|---|---|---|
| --color-brand-primary | Deep Cobalt Blue | #0038A8 | 0, 56, 168 | 220°, 100%, 33% | Light-theme text and primary actions |
| --color-accent-highlight | Ice Cobalt Tint | #90BAFF | 144, 186, 255 | 217°, 100%, 78% | Dark-theme text and accents |
| --color-surface-light | Cloud Canvas | #F8FAFC | 248, 250, 252 | 210°, 40%, 98% | Light canvas and cards |
| --color-border-subtle | Crisp Steel | #E2E8F0 | 226, 232, 240 | 214°, 32%, 91% | Decorative dividers; verify essential controls |
| --color-surface-dark | Midnight Abyss | #0A0E17 | 10, 14, 23 | 222°, 39%, 6% | Dark canvas |
If you are working from a real brand asset or screenshot, analyze the image to extract its actual colors. Do not assume a pigment or printed reference has a single authoritative HEX value.
Measured contrast for light and dark roles
| Foreground / background | Contrast | Normal text | Large text | UI components |
|---|---|---|---|---|
| #0038A8 / #FFFFFF | 9.85:1 | AAA | AAA | Exceeds 3:1 where required |
| #0038A8 / #F8FAFC | 9.42:1 | AAA | AAA | Exceeds 3:1 where required |
| #0038A8 / #90BAFF | 5.00:1 | AA; not AAA | AAA | Exceeds 3:1 where required |
| #90BAFF / #0A0E17 | 9.79:1 | AAA | AAA | Exceeds 3:1 where required |
For text, WCAG AA requires 4.5:1 at normal size and 3:1 at large size; AAA requires 7:1 and 4.5:1 respectively. Non-text contrast uses 3:1 for visual information needed to identify active controls and states against adjacent colors. A passing button label does not by itself verify the button boundary, focus indicator or entire interface.
The exact #0038A8 / #90BAFF pair meets AA for normal text, not AAA. In a dark theme, avoid using deep cobalt as text on the midnight canvas; use the tested lighter #90BAFF token instead. Check focus, boundaries and non-color status cues independently in the Contrast Checker.
Turn the palette into interface tokens
In a light theme, start with #F8FAFC for the canvas, #0A0E17 for main text and #0038A8 for blue actions. In dark mode, start with #0A0E17 and use #90BAFF for links or highlighted text. Reserve #E2E8F0 for decorative separation unless an essential border passes its adjacent-color test.
CSS custom properties to start from
--color-canvas: #F8FAFC;and--color-text-main: #0A0E17;for the light theme.--color-brand-primary: #0038A8;for the tested deep-blue light-theme role.--color-dark-canvas: #0A0E17;and--color-dark-accent: #90BAFF;for dark-theme starting points.
Frequently asked questions
Is this palette an official International Klein Blue specification?
No. International Klein Blue is associated with Yves Klein’s registered pigment formula. The HEX values here are original ColorIndicator sRGB interface tokens, not an official digital conversion of that material.
What is chromostereopsis?
It is a perceived depth difference that some viewers can notice when certain saturated colors, particularly blue and red, sit close together. It is not an inevitable effect of cobalt blue. Inspect the actual combination with users rather than assuming every blue interface will cause discomfort.
Does deep cobalt meet WCAG AAA for normal text?
For the exact pairs tested, #0038A8 measures 9.85:1 on white and 9.42:1 on #F8FAFC. Both exceed the 7:1 AAA threshold for normal text; other pairings need their own checks.
How should cobalt be used in dark mode?
Use a lighter token such as #90BAFF for text on the tested #0A0E17 canvas; that pair measures 9.79:1. Do not assume a dark cobalt text token will remain legible on dark surfaces.
Inspect RGB and HSL in the HEX to RGB Converter; measure your own text and background choices in the Contrast Checker.