HEX
#ADD8E6Primary tokenCSS Named Color Reference
Light Blue Color Code
Light Blue·#ADD8E6
Blue FamilyCoolLight toneMid saturationoklch(85.6% 0.049 220)
RGB
rgb(173, 216, 230)Screen valuesHSL
hsl(195 53% 79%)Hue and lightnessCMYK
25, 6, 0, 10Print handoffLAB
84, -11, -11Perceptual referenceOKLCH
oklch(85.6% 0.049 220)Modern perceptualLight 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.
Best text colorDark text
Body text contrast11.22:1
Best UseQuiet backgrounds, soft cards, and low-contrast support layers
Tonal Scale
100#F0F8FB
300#D9EDF4
500#BCDFEB
600#ADD8E6
800#7D9CA6
Contrast Checks
White text on this color
Buttons, badges, and filled actions.
1.53:1Needs more separation
Dark text on this color
Large headings and selective UI.
11.22:1AAA-level contrast
This color on light surface
Links, borders, and icons on light UI.
1.45:1Needs more separation
Best text colorDark textContrast 11.22:1
Professional Reference
OKLCHoklch(85.6% 0.049 220)
Relative Luminance0.6371
Source TypeCSS Named Color
Classification
Blue FamilyCoolLight toneMid saturation
Source Context
Source Type
CSS Named Color
System
CSS
Closest Matches
Accessibility Matrix
White text on this color
White text placed on the current color.
1.53:1Needs more separation
Dark text on this color
Dark text or headings on the current color.
11.22:1AAA
This color on light surface
Use this color for links, strokes, or icons on light UI.
1.45:1Needs more separation
This color on dark surface
Use this color inside dark shells for strokes, tags, or icons.
11.22:1AAA
Best text colorDark textContrast 11.22:1 · AAA
Where It Works
- Secondary panels, quiet backgrounds, and supportive cards.
- Foundational layer, not visual emphasis.
- Pairs with white, cool grays, and a deeper anchor blue.
Reference Notes
Last Updated
2026-06-25
Source Library
CSS Standard Colors
Methodology
Verified source values + site guidance
Color Notes
Light Blue is sourced from the published CSS Standard Colors library and retained here as a searchable reference swatch for product and interface reference work.
Hue Family
Trust-building blues for enterprise and SaaS.
Source Collections
CSS Named Colors
Related Colors
Palette Starting Points
Implementation Snippets
:root {
--color-light-blue: #ADD8E6;
--color-light-blue-rgb: 173 216 230;
}class="bg-[#ADD8E6] text-white"
class="hover:bg-[#7D9CA6] ring-1 ring-[#ADD8E6]"{
"lightBlue": "#ADD8E6",
"lightBlueRgb": [173, 216, 230],
"lightBlueHsl": [195, 53, 79]
}