CSS Named Color Reference

Deep Sky Blue

Deep Sky Blue·#00BFFF

Deep Sky Blue is a high-energy CSS named blue at #00BFFF that pushes closer to cyan than Dodger Blue or Royal Blue. Use it when you need a brighter, faster accent for callouts, charts, hero moments, and interaction-led interface surfaces.

Recommended text colorDark text
Body text pairing8.08:1
Strongest RoleVivid highlights, expressive banners, and bright data emphasis

Technical Values

Exact numeric values for cross-tool conversion, token mapping, and accessibility review.

HEX#00BFFFPrimary token
RGB0, 191, 255Screen values
HSL195, 100%, 50%Hue and lightness
CMYK100, 25, 0, 0Print handoff
LAB73, -18, -43Perceptual reference

Tonal Direction

Scan the ramp from light to dark to judge how Deep Sky Blue behaves across action states, layered surfaces, and supporting accents.

100#D1F3FF
300#8AE2FF
500#2ECBFF
600#00BFFF
800#008AB8

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.

2.12:1Needs more separation

Dark text on this color

Works for larger headings and selective UI blocks, but not for dense body copy.

8.08:1AAA-level contrast

This color on light surface

Use this pairing when Deep Sky Blue becomes the link, icon, border, or emphasis color on very light surfaces.

2.02:1Needs more separation
Recommended text colorDark text

Dark text reaches 8.08:1 against Deep Sky Blue, which is strong enough for body text and standard action surfaces.

Where This Color Works

  • Use Deep Sky Blue when you want a more electric blue for data callouts, hero accents, highlighted metrics, and energetic interface moments.
  • It is more vivid than Sky Blue and Cornflower Blue, but lighter and more cyan-leaning than pure Blue, which makes it useful for expressive product surfaces rather than foundational system chrome.
  • Pair it with white, ink-dark neutrals, and calmer supporting blues if you want to keep the interface sharp without making every surface feel equally loud.

Reference Context

Color Notes

Deep Sky 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.

CSS Variables
:root {
  --color-deep-sky-blue: #00BFFF;
  --color-deep-sky-blue-rgb: 0 191 255;
}

Drop into a global token file or CSS variable layer.

Utility Class
class="bg-[#00BFFF] text-white"
class="hover:bg-[#008AB8] ring-1 ring-[#00BFFF]"

Direct utility usage for a fast prototype or content block.

JSON Token
{
  "deepSkyBlue": "#00BFFF",
  "deepSkyBlueRgb": [0, 191, 255],
  "deepSkyBlueHsl": [195, 100, 50]
}

Useful for design token exports and API-driven theme objects.

Move This Color Into the Workflow

Carry Deep Sky Blue into conversion, brand palette generation, and palette exploration workflows to test how it behaves across interface scenarios.