← Back to Editor

#CCD1BA · #BCC1A3 · #B59387 · #C3775D · #30272A

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 LibraryData Visualization

Color Details Color Details

#CCD1BA

Willow Green · Silver · Apple Green

HEX
#CCD1BA
RGB
rgb(204, 209, 186)
HSL
hsl(73, 20%, 77%)
HSB
hsb(73, 11%, 82%)
CMYK
cmyk(2%, 0%, 11%, 18%)
Oklch
oklch(85.1% 0.032 117.0)

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

#BCC1A3

Willow Green · Silver · Apple Green

HEX
#BCC1A3
RGB
rgb(188, 193, 163)
HSL
hsl(70, 19%, 70%)
HSB
hsb(70, 16%, 76%)
CMYK
cmyk(3%, 0%, 16%, 24%)
Oklch
oklch(79.9% 0.041 115.0)

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

#B59387

Apricot · DarkGray · Warm Sun

HEX
#B59387
RGB
rgb(181, 147, 135)
HSL
hsl(16, 24%, 62%)
HSB
hsb(16, 25%, 71%)
CMYK
cmyk(0%, 19%, 25%, 29%)
Oklch
oklch(69.1% 0.045 40.4)

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

#C3775D

Tangerine · DarkSalmon · Warm Sun

HEX
#C3775D
RGB
rgb(195, 119, 93)
HSL
hsl(15, 46%, 56%)
HSB
hsb(15, 52%, 76%)
CMYK
cmyk(0%, 39%, 52%, 24%)
Oklch
oklch(64.5% 0.103 39.6)

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

#30272A

Dark Violet · DarkSlateGray · Raspberry

HEX
#30272A
RGB
rgb(48, 39, 42)
HSL
hsl(340, 10%, 17%)
HSB
hsb(340, 19%, 19%)
CMYK
cmyk(0%, 19%, 13%, 81%)
Oklch
oklch(28.4% 0.014 356.0)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCD1BA
BEB9D0

Analogous

D0C9B9
CCD1BA
BFD0B9

Triadic

CCD1BA
B9CBD0
D0B9CB

Split-Comp.

CCD1BA
B9BFD0
C9B9D0

Tetradic

CCD1BA
B9D0C9
BEB9D0
D0B9BF

Contrast Matrix WCAG 2.1 Contrast

CCD1BA
BCC1A3
B59387
C3775D
30272A
—
1.2
Fail
1.8
Fail
2.2
Fail
9.2
AAA
1.2
Fail
—
1.5
Fail
1.8
Fail
7.8
AAA
1.8
Fail
1.5
Fail
—
1.2
Fail
5.2
AA
2.2
Fail
1.8
Fail
1.2
Fail
—
4.2
AA Large
9.2
AAA
7.8
AAA
5.2
AA
4.2
AA Large
—
White BG
1.6Fail
1.9Fail
2.8Fail
3.4AA Large
14.5AAA
Black BG
13.4AAA
11.3AAA
7.5AAA
6.1AA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECEC0
BEBEAA
A6A68A
A2A163
2C2C29

Deuteranopia

CECDC1
BEBEAC
A8AB8B
A7AC65
2D2D29

Tritanopia

CCC4C5
BCB0B1
B38C8D
BF6869
302929

Achromatopsia

CDCDCD
BCBCBC
9C9C9C
8B8B8B
2A2A2A

Shades & Tints Shades & Tints

#CCD1BA

Dark
Light

#BCC1A3

Dark
Light

#B59387

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccd1ba;
  --color-2: #bcc1a3;
  --color-3: #b59387;
  --color-4: #c3775d;
  --color-5: #30272a;
}

SCSS

$color-1: #ccd1ba;
$color-2: #bcc1a3;
$color-3: #b59387;
$color-4: #c3775d;
$color-5: #30272a;

TAILWIND

colors: {
  'brand-1': '#ccd1ba',
  'brand-2': '#bcc1a3',
  'brand-3': '#b59387',
  'brand-4': '#c3775d',
  'brand-5': '#30272a',
}

RGB Array

[204, 209, 186], [188, 193, 163], [181, 147, 135], [195, 119, 93], [48, 39, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #CCD1BA, #BCC1A3, #B59387, #C3775D, #30272A is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ccd1ba; --color-2: #bcc1a3; --color-3: #b59387; --color-4: #c3775d; --color-5: #30272a. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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