PALUNEXA
Back to the atlas

COLOR FIELD NOTES

A closer look at
#a2b6cb

Color names, HEX, RGB, HSL or OKLCH. No account needed.

Selected color · sRGB#a2b6cb
The numbers behind the color · RGB / HSL / OKLCH
HEX
#a2b6cb
RGB
rgb(162, 182, 203)
HSL
hsl(210.73, 28.28%, 71.57%)
OKLCH
oklch(0.76783723 0.03740288 249.60645)

Palettes with #a2b6cb

Open suggestions for this color. Your selected color stays locked when you edit a palette.

Choose a palette you like, copy its colors, or edit it in Studio.

Curated proposal

Sky postcard

Pastel

Edit in Studio

Details and contrast

Pale blues leave room for travel photos and short captions.

Suggested uses: Websites · Editorial

Suggested color roles

Background
#f0f5fc
Card
#d5e3f4
Accent
#a2b6cb
Button
#f0f5fc
Text
#29394f

Text / Background: 10.70:1 — Normal-text AA

Text / Card: 9.00:1 — Normal-text AA

Text / Button: 10.70:1 — Normal-text AA

Check each text/background pair; no palette color is changed automatically.

The selected color is locked. The first palette color remains the studio base.

Design in context

Browse a few fixed, original design examples. Nearby colors may share a reference, but the artwork does not change with your palette.

Generated palette

Tetradic · #a2b6cb

Edit in Studio

Details and contrast

Calculated by the existing HSL harmony engine, not an editorial selection.

Suggested color roles

Background
#a2b6cb
Card
#b7a2cb
Accent
#cbb7a2
Button
#a2b6cb
Text
#b6cba2

Text / Background: 1.19:1 — Below AA; alternative #000000

Text / Card: 1.33:1 — Below AA; alternative #000000

Text / Button: 1.19:1 — Below AA; alternative #000000

Check each text/background pair; no palette color is changed automatically.

The selected color is locked. The first palette color remains the studio base.

Design in context

Browse a few fixed, original design examples. Nearby colors may share a reference, but the artwork does not change with your palette.

Generated palette

Square · #a2b6cb

Edit in Studio

Details and contrast

Calculated by the existing HSL harmony engine, not an editorial selection.

Suggested color roles

Background
#a2b6cb
Card
#cba2ca
Accent
#cbb7a2
Button
#a2b6cb
Text
#a2cba3

Text / Background: 1.15:1 — Below AA; alternative #000000

Text / Card: 1.21:1 — Below AA; alternative #000000

Text / Button: 1.15:1 — Below AA; alternative #000000

Check each text/background pair; no palette color is changed automatically.

The selected color is locked. The first palette color remains the studio base.

Design in context

Browse a few fixed, original design examples. Nearby colors may share a reference, but the artwork does not change with your palette.

Explore this color in the studio

02 / COLOR COMPANIONS

Better together.

Find a different perspective on your color with a little color theory.

#a2b6cb

The base color is the anchor. Locks and the base color stay unchanged.

Export palette CSS

Neighbors at −30°, 0° and +30°. A close-knit family of hues.

01COMPANION
#a2cacbrgb(162, 202, 203)oklch(0.81060578 0.04234259 198.238002)
Contrast ratio: 11.85:1
02BASE
#a2b6cbrgb(162, 182, 203)oklch(0.76783723 0.03740288 249.60645)
Contrast ratio: 10.09:1
03COMPANION
#a3a2cbrgb(163, 162, 203)oklch(0.72725566 0.05905884 285.949467)
Contrast ratio: 8.59:1
HSL / Analogous
Color values & advanced tools

Selected color / #A2B6CB

The numbers behind the color

One color, four ways to describe it.

HEX
#a2b6cb
RGB
rgb(162, 182, 203)
HSL
hsl(210.73, 28.28%, 71.57%)
OKLCH
oklch(0.76783723 0.03740288 249.60645)
Hue
210.73°
Saturation
28.28%
Lightness
71.57%
Where this harmony might work

Design suggestions below are subjective. Hue angles and contrast ratios are calculated facts.

Suggested use
Editorial pages, lifestyle brands and calm interfaces.
Strength
Neighboring hues create a related visual rhythm.
Considerations
Similar hues can blur boundaries; add labels and neutral spacing.
Design example
Use the middle hue for a hero panel and its neighbors for decorative cards.
OKLCH · Perceptual adjustments

Adjust lightness and chroma of unlocked companions in OKLCH. HSL hue spacing can change. Preview the result before applying.

Current palette
Adjusted preview

Colors needing sRGB chroma reduction: 0

The base color is the anchor. Locks and the base color stay unchanged.

Compare with the original HSL harmony

These are the unedited theory colors. Compare their HEX and OKLCH values with the edited palette above.

#a2cacboklch(0.81060578 0.04234259 198.238002)#a2b6cboklch(0.76783723 0.03740288 249.60645)#a3a2cboklch(0.72725566 0.05905884 285.949467)
Palette CSS
:root {
  --palette-1: #a2cacb;
  --palette-2: #a2b6cb;
  --palette-3: #a3a2cb;
}
Live design preview

03 / IN CONTEXT

Put it into perspective.

Real CSS. Your colors. A small glimpse of what comes next.

Palette role mapping

Rendered text pair #000000 / #a2b6cb · 10.09:1

your-next-idea.design
FORM & FIELDIndependent ideas. Considered colors.
STUDIO FOR EVERYDAY IDEAS

Room for a fresh perspective.

Thoughtfully made things start with a little curiosity.

Discover the collection

The palette text/background pair is below normal-text AA.

#a3a2cb / #a2b6cb · 1.17:1 · Normal text · AA

Suggested text color: #000000 (10.09:1).

Displayed text contrast: 10.09:1 · Accessible text alternatives affect only the preview. Your palette stays unchanged.

The tested pair is used on colored buttons, cards, KPIs and slide bands. Other template text uses #262a23 (13.18:1) or #55594f (6.47:1) on #f6f3ec. Charts have numbered labels. This is not a complete accessibility audit.

Design in context

Browse a few fixed, original design examples. Nearby colors may share a reference, but the artwork does not change with your palette.

Text contrast checker

Accessibility / WCAG AA

Make it readable.

Check the selected color against your text or background color.

Suggested text color: #000000 · 21.00:1

AA requires 4.5:1 for normal text and 3:1 for large text. This checks color contrast, not full WCAG compliance.

Aa

Color should be seen. Words should be read.

#a2b6cb / #ffffff
Contrast ratio2.08:1
  • Normal text · AABelow target
  • Large text · AABelow target
  • Normal text · AAABelow target
  • Large text · AAABelow target

A little theory. A lot to explore.

PALUNEXA rotates hues on the HSL color wheel and keeps saturation and lightness unchanged. Monochromatic palettes vary lightness instead. Harmony is a starting point for design, not a guarantee of aesthetic fit.

Back to the atlas