Light blue evokes calm, clarity, and modern design, appearing everywhere from digital interfaces to branding. This guide presents 25 shades of light blue with precise hex, RGB, and CMYK values for designers and developers.
Each color is formatted as a usable specification so you can copy codes directly into CSS, Sketch, Figma, or print workflows without conversion guesswork.
| Shade | Hex | RGB | CMYK |
|---|---|---|---|
| Azure | #007FFF | 0, 127, 255 | 100, 50, 0, 0 |
| Light Blue | #ADD8E6 | 173, 216, 230 | 24, 6, 0, 10 |
| Powder Blue | #B0E0E6 | 176, 224, 230 | 23, 2, 0, 10 |
| Deep Sky Blue | #00BFFF | 0, 191, 255 | 100, 25, 0, 0 |
| Alice Blue | #F0F8FF | 240, 248, 255 | 6, 2, 0, 0 |
Brand and Digital Usage of Light Blue
Choosing tints for interfaces and logos
On screens, light blue balances readability and calm. Use darker tints for text on white, and lighter tints for backgrounds and accents. Maintain contrast ratios above 4.5:1 for body text to ensure accessibility across devices.
For logos, consider how the hue interacts with surrounding colors. A slightly saturated blue can feel confident yet friendly, while desaturated tones communicate sophistication and neutrality in corporate contexts.
Print and Production Considerations
Translating screens to physical media
CMYK values shift how light blue appears on paper. Coated stocks retain brightness, while uncoated stocks may mute tones. Always request a physical proof when exact color fidelity matters for branding or compliance.
Ink limits and undercolor removal affect pastel blues. Specify percentages for cyan and magenta to avoid muddiness, and confirm that white underbase coverage does not show through on opaque substrates.
Design System Integration
Building a consistent light blue palette
Organize your palette in steps, such as 50, 100, 200, 300, and 400 levels derived from a base color. This structure simplifies token naming in design tools and component libraries, ensuring predictable usage across teams.
Map semantic roles to specific shades for alerts, surfaces, and links. Pair light blue with neutral grays and complementary accents like soft coral or muted gold to keep interfaces harmonious and focused.
Accessibility and Contrast
Ensuring readability across light blue tones
Verify contrast for interactive elements, icons, and disabled states. Slight differences in light blue can fail contrast, so test with tools and simulate visual impairments to confirm usability for all users.
Implementation Checklist
- Verify contrast ratios for text and interactive elements
- Document hex, RGB, and CMYK tokens in a shared design system
- Run proofs on target materials to confirm color accuracy
- Limit active light blue shades to maintain interface clarity
- Test palettes under different lighting and device types
FAQ
Reader questions
Which light blue shade works best for text on white backgrounds? Choose deeper tones like #007FFF (Azure) or #00BFFF (Deep Sky Blue), which provide strong contrast for body text. Always verify contrast ratios to meet accessibility standards. How do I convert these codes to CMYK for professional printing? Use the CMYK values provided in the summary table as a starting point. Request a press proof with your printer to fine-tune ink percentages for the exact substrate and lighting conditions. Can I use these light blue shades together in the same interface?
Yes, limit your active palette to three or four related blues, assigning roles such as background, surface, and accent. This prevents visual noise and keeps the interface calm and coherent.
What are the RGB values for Powder Blue and Alice Blue?
Powder Blue is RGB 176, 224, 230, and Alice Blue is RGB 240, 248, 255. Use these values for digital projects to maintain consistent color reproduction across screens.