← Back to Editor

#CFE854 · #C2BF88 · #B2A475 · #B3906A · #CE5D4F

sea

A 5-color sea palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CFE854

Willow Green · GreenYellow · Apple Green

HEX
#CFE854
RGB
rgb(207, 232, 84)
HSL
hsl(70, 76%, 62%)
HSB
hsb(70, 64%, 91%)
CMYK
cmyk(11%, 0%, 64%, 9%)
Oklch
oklch(88.5% 0.172 118.3)

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

#C2BF88

Fresh Green · Tan · Sunflower

HEX
#C2BF88
RGB
rgb(194, 191, 136)
HSL
hsl(57, 32%, 65%)
HSB
hsb(57, 30%, 76%)
CMYK
cmyk(0%, 2%, 30%, 24%)
Oklch
oklch(79.4% 0.073 105.3)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#B2A475

Ginger · Tan · Sunflower

HEX
#B2A475
RGB
rgb(178, 164, 117)
HSL
hsl(46, 28%, 58%)
HSB
hsb(46, 34%, 70%)
CMYK
cmyk(0%, 8%, 34%, 30%)
Oklch
oklch(71.9% 0.066 93.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#B3906A

Ginger · DarkSalmon · Warm Sun

HEX
#B3906A
RGB
rgb(179, 144, 106)
HSL
hsl(31, 32%, 56%)
HSB
hsb(31, 41%, 70%)
CMYK
cmyk(0%, 20%, 41%, 30%)
Oklch
oklch(67.7% 0.067 68.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#CE5D4F

Crimson · Tomato · Passion Red

HEX
#CE5D4F
RGB
rgb(206, 93, 79)
HSL
hsl(7, 56%, 56%)
HSB
hsb(7, 62%, 81%)
CMYK
cmyk(0%, 55%, 62%, 19%)
Oklch
oklch(61.6% 0.146 29.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFE854
6D54E8

Analogous

E8B754
CFE854
86E854

Triadic

CFE854
54CFE8
E854CF

Split-Comp.

CFE854
5486E8
B754E8

Tetradic

CFE854
54E8B7
6D54E8
E85486

Contrast Matrix WCAG 2.1 Contrast

CFE854
C2BF88
B2A475
B3906A
CE5D4F
—
1.4
Fail
1.8
Fail
2.2
Fail
2.9
Fail
1.4
Fail
—
1.3
Fail
1.6
Fail
2.1
Fail
1.8
Fail
1.3
Fail
—
1.2
Fail
1.6
Fail
2.2
Fail
1.6
Fail
1.2
Fail
—
1.3
Fail
2.9
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
White BG
1.4Fail
1.9Fail
2.5Fail
3.0Fail
4.0AA Large
Black BG
15.3AAA
11.1AAA
8.5AAA
7.1AAA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DADA78
C1C195
ACAC80
A4A473
9D9C52

Deuteranopia

D8D680
C1C199
ADAE83
A6A975
A4AC53

Tritanopia

D0949A
C2A0A2
B1898B
B17A7C
C85556

Achromatopsia

D0D0D0
BABABA
A3A3A3
969696
7D7D7D

Shades & Tints Shades & Tints

#CFE854

Dark
Light

#C2BF88

Dark
Light

#B2A475

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfe854;
  --color-2: #c2bf88;
  --color-3: #b2a475;
  --color-4: #b3906a;
  --color-5: #ce5d4f;
}

SCSS

$color-1: #cfe854;
$color-2: #c2bf88;
$color-3: #b2a475;
$color-4: #b3906a;
$color-5: #ce5d4f;

TAILWIND

colors: {
  'brand-1': '#cfe854',
  'brand-2': '#c2bf88',
  'brand-3': '#b2a475',
  'brand-4': '#b3906a',
  'brand-5': '#ce5d4f',
}

RGB Array

[207, 232, 84], [194, 191, 136], [178, 164, 117], [179, 144, 106], [206, 93, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #CFE854, #C2BF88, #B2A475, #B3906A, #CE5D4F 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: #cfe854; --color-2: #c2bf88; --color-3: #b2a475; --color-4: #b3906a; --color-5: #ce5d4f. 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