#AABF9D + #855C4D + #D96A58 + #F8B45A + #F1E19D · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AABF9D

Celadon · DarkGray · Apple Green

HEX

#AABF9D

RGB

rgb(170, 191, 157)

HSL

hsl(97, 21%, 68%)

HSB

hsb(97, 18%, 75%)

CMYK

cmyk(11%, 0%, 18%, 25%)

Oklch

oklch(77.9% 0.052 133.5)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#855C4D

Tangerine · DimGray · Amber Brown

HEX

#855C4D

RGB

rgb(133, 92, 77)

HSL

hsl(16, 27%, 41%)

HSB

hsb(16, 42%, 52%)

CMYK

cmyk(0%, 31%, 42%, 48%)

Oklch

oklch(51.4% 0.059 40.9)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#D96A58

Vermilion · Tomato · Passion Red

HEX

#D96A58

RGB

rgb(217, 106, 88)

HSL

hsl(8, 63%, 60%)

HSB

hsb(8, 59%, 85%)

CMYK

cmyk(0%, 51%, 59%, 15%)

Oklch

oklch(65.2% 0.143 30.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#F8B45A

Ginger · SandyBrown · Warm Sun

HEX

#F8B45A

RGB

rgb(248, 180, 90)

HSL

hsl(34, 92%, 66%)

HSB

hsb(34, 64%, 97%)

CMYK

cmyk(0%, 27%, 64%, 3%)

Oklch

oklch(81.7% 0.132 71.7)

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

#F1E19D

Goose Yellow · Khaki · Lemon Cream

HEX

#F1E19D

RGB

rgb(241, 225, 157)

HSL

hsl(49, 75%, 78%)

HSB

hsb(49, 35%, 95%)

CMYK

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

Oklch

oklch(90.7% 0.088 96.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AABF9D

B19CBF

Analogous

BBBF9C

AABF9D

9CBFA0

Triadic

AABF9D

9CA9BF

BF9CA9

Split-Comp.

AABF9D

A09CBF

BF9CBB

Tetradic

AABF9D

9CBBBF

B19CBF

BFA09C

Contrast Matrix WCAG 2.1 Contrast

AABF9D	855C4D	D96A58	F8B45A	F1E19D
—	2.9 Fail	1.7 Fail	1.1 Fail	1.5 Fail
2.9 Fail	—	1.7 Fail	3.2 AA Large	4.4 AA Large
1.7 Fail	1.7 Fail	—	1.9 Fail	2.6 Fail
1.1 Fail	3.2 AA Large	1.9 Fail	—	1.4 Fail
1.5 Fail	4.4 AA Large	2.6 Fail	1.4 Fail	—

White BG

2.0Fail

5.8AA

3.4AA Large

1.8Fail

1.3Fail

Black BG

10.6AAA

3.6AA Large

6.2AA

11.7AAA

16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B3A5

737351

A9A85C

DBDA70

EAEAAD

Deuteranopia

B2B0A7

767952

AFB85D

DFE475

EBECB1

Tritanopia

ABACAD

835354

D36061

F58185

F0BABD

Achromatopsia

B5B5B5

676767

898989

BEBEBE

DEDEDE

Shades & Tints Shades & Tints

#AABF9D

Dark

Light

#855C4D

Dark

Light

#D96A58

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aabf9d;
  --color-2: #855c4d;
  --color-3: #d96a58;
  --color-4: #f8b45a;
  --color-5: #f1e19d;
}

SCSS

$color-1: #aabf9d;
$color-2: #855c4d;
$color-3: #d96a58;
$color-4: #f8b45a;
$color-5: #f1e19d;

TAILWIND

colors: {
  'brand-1': '#aabf9d',
  'brand-2': '#855c4d',
  'brand-3': '#d96a58',
  'brand-4': '#f8b45a',
  'brand-5': '#f1e19d',
}

RGB Array

[170, 191, 157], [133, 92, 77], [217, 106, 88], [248, 180, 90], [241, 225, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #AABF9D, #855C4D, #D96A58, #F8B45A, #F1E19D 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: #aabf9d; --color-2: #855c4d; --color-3: #d96a58; --color-4: #f8b45a; --color-5: #f1e19d. 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