#768299 + #A9AEC9 + #CDCCD9 + #EDE0DA + #FFAC9C · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#768299

Azure · LightSlateGray · Navy Blue

HEX

#768299

RGB

rgb(118, 130, 153)

HSL

hsl(219, 15%, 53%)

HSB

hsb(219, 23%, 60%)

CMYK

cmyk(23%, 15%, 0%, 40%)

Oklch

oklch(60.5% 0.038 263.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#A9AEC9

Azure · Silver · Cobalt Blue

HEX

#A9AEC9

RGB

rgb(169, 174, 201)

HSL

hsl(231, 23%, 73%)

HSB

hsb(231, 16%, 79%)

CMYK

cmyk(16%, 13%, 0%, 21%)

Oklch

oklch(75.6% 0.039 277.1)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#CDCCD9

Wisteria · LightGray · Sky Blue

HEX

#CDCCD9

RGB

rgb(205, 204, 217)

HSL

hsl(245, 15%, 83%)

HSB

hsb(245, 6%, 85%)

CMYK

cmyk(6%, 6%, 0%, 15%)

Oklch

oklch(85.0% 0.018 289.6)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#EDE0DA

Apricot · Beige · Peach Orange

HEX

#EDE0DA

RGB

rgb(237, 224, 218)

HSL

hsl(19, 35%, 89%)

HSB

hsb(19, 8%, 93%)

CMYK

cmyk(0%, 5%, 8%, 7%)

Oklch

oklch(91.5% 0.016 46.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FFAC9C

Peach Pink · LightSalmon · Cherry Blossom

HEX

#FFAC9C

RGB

rgb(255, 172, 156)

HSL

hsl(10, 100%, 81%)

HSB

hsb(10, 39%, 100%)

CMYK

cmyk(0%, 33%, 39%, 0%)

Oklch

oklch(82.1% 0.101 31.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

768299

998D75

Analogous

759499

768299

7B7599

Triadic

768299

997582

829975

Split-Comp.

768299

997B75

949975

Tetradic

768299

997594

998D75

75997B

Contrast Matrix WCAG 2.1 Contrast

768299	A9AEC9	CDCCD9	EDE0DA	FFAC9C
—	1.8 Fail	2.4 Fail	3.0 AA Large	2.1 Fail
1.8 Fail	—	1.4 Fail	1.7 Fail	1.2 Fail
2.4 Fail	1.4 Fail	—	1.2 Fail	1.1 Fail
3.0 AA Large	1.7 Fail	1.2 Fail	—	1.4 Fail
2.1 Fail	1.2 Fail	1.1 Fail	1.4 Fail	—

White BG

3.9AA Large

2.2Fail

1.6Fail

1.3Fail

1.8Fail

Black BG

5.4AA

9.6AAA

13.2AAA

16.3AAA

11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7B93

ABABC2

CDCDD6

E7E7DB

DBDAA0

Deuteranopia

7B7A92

ABABC1

CDCDD5

E8E9DC

E0E6A1

Tritanopia

778F8E

A9BDBC

CDD3D3

ECDDDD

FBA3A4

Achromatopsia

818181

B0B0B0

CECECE

E3E3E3

C3C3C3

Shades & Tints Shades & Tints

#768299

Dark

Light

#A9AEC9

Dark

Light

#CDCCD9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #768299;
  --color-2: #a9aec9;
  --color-3: #cdccd9;
  --color-4: #ede0da;
  --color-5: #ffac9c;
}

SCSS

$color-1: #768299;
$color-2: #a9aec9;
$color-3: #cdccd9;
$color-4: #ede0da;
$color-5: #ffac9c;

TAILWIND

colors: {
  'brand-1': '#768299',
  'brand-2': '#a9aec9',
  'brand-3': '#cdccd9',
  'brand-4': '#ede0da',
  'brand-5': '#ffac9c',
}

RGB Array

[118, 130, 153], [169, 174, 201], [205, 204, 217], [237, 224, 218], [255, 172, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #768299, #A9AEC9, #CDCCD9, #EDE0DA, #FFAC9C is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #768299; --color-2: #a9aec9; --color-3: #cdccd9; --color-4: #ede0da; --color-5: #ffac9c. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This sea-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color