CSS Named Color Reference

Dodger Blue

Dodger Blue·#1E90FF

Dodger Blue is a vivid CSS named color at #1E90FF that feels faster, lighter, and more interaction-driven than standard Blue or Royal Blue. Use it when you need a brighter action color for links, buttons, highlights, and modern interface states.

Recommended text colorDark text
Body text pairing5.30:1
Strongest RolePrimary actions, active states, and energetic link emphasis
Generate PaletteOpen Converter

Technical Values

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

HEX#1E90FFPrimary token
RGB30, 144, 255Screen values
HSL210, 100%, 56%Hue and lightness
CMYK88, 44, 0, 0Print handoff
LAB59, 10, -63Perceptual reference

Tonal Direction

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

100#D7EBFF
300#98CCFF
500#47A4FF
600#1E90FF
800#1668B8

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.

3.24:1Large text / UI only

Dark text on this color

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

5.30:1Body text ready

This color on light surface

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

3.07:1Large text / UI only
Recommended text colorDark text

Dark text reaches 5.30:1 against Dodger Blue, which is strong enough for body text and standard action surfaces.

Where This Color Works

  • Use Dodger Blue when you want a more energetic action blue than Royal Blue, especially for primary buttons, link emphasis, and active states.
  • Its higher brightness makes it feel modern and responsive, but it usually works better in focused UI roles than in large, full-surface layouts.
  • Pair it with white, deep navy neutrals, and softer supporting blues so the interface keeps its clarity without becoming visually noisy.

Reference Context

Color Notes

Dodger 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

Blue

Blue

#0000FF·CSS Standard Colors

Royal Blue

Royal Blue

#4169E1·CSS Standard Colors

Deep Sky Blue

Deep Sky Blue

#00BFFF·CSS Standard Colors

Cornflower Blue

Cornflower Blue

#6495ED·CSS Standard Colors

Tailwind Blue 500

Tailwind Blue 500

#3B82F6·Tailwind CSS Colors

Palette Starting Points

Blueberry Voltage

Open Palette Library

Aurora Coast

Open Palette Library

Blue Obsidian Supernova

Open Palette Library

Implementation Snippets

Reference-ready snippets for CSS variables, utility-first styling, and token exports.

CSS Variables
:root {
  --color-dodger-blue: #1E90FF;
  --color-dodger-blue-rgb: 30 144 255;
}

Drop into a global token file or CSS variable layer.

Utility Class
class="bg-[#1E90FF] text-white"
class="hover:bg-[#1668B8] ring-1 ring-[#1E90FF]"

Direct utility usage for a fast prototype or content block.

JSON Token
{
  "dodgerBlue": "#1E90FF",
  "dodgerBlueRgb": [30, 144, 255],
  "dodgerBlueHsl": [210, 100, 56]
}

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

Move This Color Into the Workflow

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

Generate PaletteBrowse More Colors