Technical Values
Exact numeric values for cross-tool conversion, token mapping, and accessibility review.
CSS Named Color Reference
Light Blue
Light Blue·#ADD8E6
Light Blue is a soft CSS named blue at #ADD8E6 that feels calmer and less directional than Light Sky Blue or Sky Blue. Use it when you need a low-pressure surface color for quiet product backgrounds, assistive cards, table fills, and subtle informational sections.
Recommended text colorDark text
Body text pairing11.22:1
Strongest RoleQuiet backgrounds, soft cards, and low-contrast support layers
Tonal Direction
Scan the ramp from light to dark to judge how Light Blue behaves across action states, layered surfaces, and supporting accents.
100#F0F8FB
300#D9EDF4
500#BCDFEB
600#ADD8E6
800#7D9CA6
Contrast & Interface Preview
Not every foreground and background pairing behaves the same. Use these checks to decide when white text, dark text, or the color itself should take the lead.
White text on this color
Best for reversed buttons, tabs, badges, and filled action surfaces.
1.53:1Needs more separation
Dark text on this color
Works for larger headings and selective UI blocks, but not for dense body copy.
11.22:1AAA-level contrast
This color on light surface
Use this pairing when Light Blue becomes the link, icon, border, or emphasis color on very light surfaces.
1.45:1Needs more separation
Recommended text colorDark text
Dark text reaches 11.22:1 against Light Blue, which is strong enough for body text and standard action surfaces.
Where This Color Works
- Use Light Blue when you need a gentle blue for secondary panels, quiet backgrounds, supportive cards, and low-contrast empty states.
- It is softer and less directional than Sky Blue or Light Sky Blue, which makes it better for foundational UI layers than for visual emphasis.
- Pair it with white, cool grays, and one deeper anchor blue if you want the interface to stay calm while still preserving enough hierarchy.
Reference Context
Color Notes
Light Blue is sourced from the published CSS Standard Colors library and retained here as a searchable reference swatch for product, interface, and branding work.
Hue Family
Trust-building blues for enterprise and SaaS.
Source Library
CSS Named Colors
Related Blues
Palette Starting Points
Implementation Snippets
Reference-ready snippets for CSS variables, utility-first styling, and token exports.
:root {
--color-light-blue: #ADD8E6;
--color-light-blue-rgb: 173 216 230;
}Drop into a global token file or CSS variable layer.
class="bg-[#ADD8E6] text-white"
class="hover:bg-[#7D9CA6] ring-1 ring-[#ADD8E6]"Direct utility usage for a fast prototype or content block.
{
"lightBlue": "#ADD8E6",
"lightBlueRgb": [173, 216, 230],
"lightBlueHsl": [195, 53, 79]
}Useful for design token exports and API-driven theme objects.
Move This Color Into the Workflow
Carry Light Blue into conversion, brand palette generation, and palette exploration workflows to test how it behaves across interface scenarios.