COLOR EXPLORER

THE ORIGINAL SWATCH#111F68

100% opacity · sRGB

YOUR NEXT GREAT ACCENT

#111F68

Explore the codes, find a readable pairing, and see how this color feels in a real design.

blue family Calculated from HEX

HEX#111F68

RGBrgb(17, 31, 104)

HSLhsl(230, 72%, 24%)

PUT IT INTO PRACTICE

A color is only half the story.

Try it with another color before you commit.

Open full contrast checker

MAKE ROOM FOR SOMETHING GOOD

A little color. A whole lot of possibility.

Selected text: #111F68

Preview textText size 24px

CONTRAST RATIO14.79:1

AA · normal text: Pass
AA · large text: Pass
AAA · normal text: Pass

Normal text: AA 4.5:1, AAA 7:1. Large text: AA 3:1 (24px regular or about 19px bold).

Against white14.79:1

Against black1.42:1

Results use the exact pair, at full opacity. WCAG contrast guidance ↗

A color worth keeping? Save it above or share it.

COPY. PASTE. CREATE.

Color codes

HEX

#111f68

RGB

rgb(17, 31, 104)

HSL

hsl(230, 72%, 24%)

OKLCH

oklch(0.2853 0.1279 268.12)

CMYK

cmyk(84%, 70%, 0%, 59%)

CSS variable

--color-111f68: #111f68;

CMYK is an approximate reference; print output depends on the color profile. HSV and CMYK are not CSS color functions.

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50dff4ff 100d0e7ff 200b8d2ff 3009ebbff 4007f9df1 5006581d3 600546cb2 700425691 800304171 900202c53 9500e1838

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

Edit 9-color palette

ebecf2 d7dae6 c4c7d9 b0b4cd 9ca2c0 888fb4 747ca7 606a9a 4d578e 394481 253275 111f68 101c5f 0e1a57 0d174e 0b1545 0a123d 091034 070d2b 060a23 04081a 030511 010309

Palette

Tints

Mixed toward white — soft backgrounds and highlights

Edit 9-color palette

ebecf2 d7dae6 c4c7d9 b0b4cd 9ca2c0 888fb4 747ca7 606a9a 4d578e 394481 253275

Palette

Shades

Mixed toward black — depth, text, and emphasis

Edit 9-color palette

101c5f 0e1a57 0d174e 0b1545 0a123d 091034 070d2b 060a23 04081a 030511 010309

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

Edit 9-color palette

1a276a 242f6c 2d376e 363f70 3f4772 495074 525876 5b6078 64687a 6e707c 77787e

Harmony

Complementary

Opposite on the color wheel for contrast

Edit palette

#111F68Stop 1 #695B11Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

Edit palette

#114C69Stop 1 #111F68Stop 2 #2F1169Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

Edit palette

#111F68Stop 1 #691120Stop 2 #206911Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

Edit palette

#111F68Stop 1 #692F11Stop 2 #4C6911Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

Edit palette

#0E1B58Stop 1 #192E9AStop 2 #2442DBStop 3 #657BE6Stop 4 #A7B4F1Stop 5

Export

Developer code

css

:root {
  --color111f68-1: #111f68;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

blue-950

Very different · ΔE 5.3 · #172554

Nearest CSS named color

MidnightBlue

Noticeably different · ΔE 3.08 · #191970

Nearest Material color

indigo-900

Noticeably different · ΔE 3.73 · #1A237E

Nearest Bootstrap color

dark

Very different · ΔE 16.91 · #212529

Using this color

Where #111f68 works

#111F68 (#111f68) sits in the blue family at about 230° hue, 72% saturation, and 24% lightness. Contrast is 14.79:1 on white and 1.42:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: blue-950 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
text or icons on a white canvas

On a black or near-black UI, #111f68 is 1.42:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Trust, calm, and professionalism. The most used color in SaaS, finance, and healthcare. Common uses still include buttons, charts, and accents in the Blue range — always verify the pair for this exact hex in the contrast checker.