#DE997A + #4B706A + #658776 + #ABA47A + #EEB767 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DE997A

Apricot · DarkSalmon · Warm Sun

HEX

#DE997A

RGB

rgb(222, 153, 122)

HSL

hsl(19, 60%, 67%)

HSB

hsb(19, 45%, 87%)

CMYK

cmyk(0%, 31%, 45%, 13%)

Oklch

oklch(74.3% 0.094 45.0)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#4B706A

Mineral Blue · DimGray · Mint Ice

HEX

#4B706A

RGB

rgb(75, 112, 106)

HSL

hsl(170, 20%, 37%)

HSB

hsb(170, 33%, 44%)

CMYK

cmyk(33%, 0%, 5%, 56%)

Oklch

oklch(51.5% 0.043 183.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#658776

Mineral Blue · SlateGray · Olive Green

HEX

#658776

RGB

rgb(101, 135, 118)

HSL

hsl(150, 14%, 46%)

HSB

hsb(150, 25%, 53%)

CMYK

cmyk(25%, 0%, 13%, 47%)

Oklch

oklch(59.2% 0.046 162.9)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#ABA47A

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#ABA47A

RGB

rgb(171, 164, 122)

HSL

hsl(51, 23%, 57%)

HSB

hsb(51, 29%, 67%)

CMYK

cmyk(0%, 4%, 29%, 33%)

Oklch

oklch(71.4% 0.058 99.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#EEB767

Ginger · SandyBrown · Warm Sun

HEX

#EEB767

RGB

rgb(238, 183, 103)

HSL

hsl(36, 80%, 67%)

HSB

hsb(36, 57%, 93%)

CMYK

cmyk(0%, 23%, 57%, 7%)

Oklch

oklch(81.4% 0.117 75.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE997A

78BDDD

Analogous

DD788B

DE997A

DDCB78

Triadic

DE997A

78DD98

9878DD

Split-Comp.

DE997A

78DDCB

788BDD

Tetradic

DE997A

8BDD78

78BDDD

CB78DD

Contrast Matrix WCAG 2.1 Contrast

DE997A	4B706A	658776	ABA47A	EEB767
—	2.3 Fail	1.7 Fail	1.1 Fail	1.3 Fail
2.3 Fail	—	1.4 Fail	2.2 Fail	3.0 AA Large
1.7 Fail	1.4 Fail	—	1.6 Fail	2.2 Fail
1.1 Fail	2.2 Fail	1.6 Fail	—	1.4 Fail
1.3 Fail	3.0 AA Large	2.2 Fail	1.4 Fail	—

White BG

2.3Fail

5.5AA

4.0AA Large

2.5Fail

1.8Fail

Black BG

8.9AAA

3.8AA Large

5.3AA

8.3AAA

11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C082

5B5B6B

74747A

A8A884

D6D67A

Deuteranopia

C4C983

59566C

726F7B

A8A987

D9DE7F

Tritanopia

DB8789

4D6D6D

677D7E

AB8C8E

EB8A8D

Achromatopsia

AAAAAA

646464

7B7B7B

A1A1A1

BEBEBE

Shades & Tints Shades & Tints

#DE997A

Dark

Light

#4B706A

Dark

Light

#658776

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de997a;
  --color-2: #4b706a;
  --color-3: #658776;
  --color-4: #aba47a;
  --color-5: #eeb767;
}

SCSS

$color-1: #de997a;
$color-2: #4b706a;
$color-3: #658776;
$color-4: #aba47a;
$color-5: #eeb767;

TAILWIND

colors: {
  'brand-1': '#de997a',
  'brand-2': '#4b706a',
  'brand-3': '#658776',
  'brand-4': '#aba47a',
  'brand-5': '#eeb767',
}

RGB Array

[222, 153, 122], [75, 112, 106], [101, 135, 118], [171, 164, 122], [238, 183, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #DE997A, #4B706A, #658776, #ABA47A, #EEB767 is ideal for: corporate websites, product showcases, portfolios. 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: #de997a; --color-2: #4b706a; --color-3: #658776; --color-4: #aba47a; --color-5: #eeb767. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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