← Back to Editor

#CCAF81 · #A68550 · #856A40 · #07042A · #4A574F

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CCAF81

Ginger · Tan · Warm Sun

HEX
#CCAF81
RGB
rgb(204, 175, 129)
HSL
hsl(37, 42%, 65%)
HSB
hsb(37, 37%, 80%)
CMYK
cmyk(0%, 14%, 37%, 20%)
Oklch
oklch(76.8% 0.070 78.9)

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

#A68550

Ochre · Gray · Amber Brown

HEX
#A68550
RGB
rgb(166, 133, 80)
HSL
hsl(37, 35%, 48%)
HSB
hsb(37, 52%, 65%)
CMYK
cmyk(0%, 20%, 52%, 35%)
Oklch
oklch(63.6% 0.081 78.3)

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

#856A40

Ochre · Sienna · Amber Brown

HEX
#856A40
RGB
rgb(133, 106, 64)
HSL
hsl(37, 35%, 39%)
HSB
hsb(37, 52%, 52%)
CMYK
cmyk(0%, 20%, 52%, 48%)
Oklch
oklch(54.1% 0.068 77.6)

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

#07042A

Deep Indigo · Black · Deep Sea Blue

HEX
#07042A
RGB
rgb(7, 4, 42)
HSL
hsl(245, 83%, 9%)
HSB
hsb(245, 90%, 16%)
CMYK
cmyk(83%, 90%, 0%, 84%)
Oklch
oklch(15.2% 0.075 277.4)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#4A574F

Celadon · DarkSlateGray · Charcoal

HEX
#4A574F
RGB
rgb(74, 87, 79)
HSL
hsl(143, 8%, 32%)
HSB
hsb(143, 15%, 34%)
CMYK
cmyk(15%, 0%, 9%, 66%)
Oklch
oklch(44.3% 0.021 158.4)

Traditional「Celadon」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCAF81
809DCB

Analogous

CB8980
CCAF81
C2CB80

Triadic

CCAF81
80CBAE
AE80CB

Split-Comp.

CCAF81
80C2CB
8980CB

Tetradic

CCAF81
80CB89
809DCB
CB80C2

Contrast Matrix WCAG 2.1 Contrast

CCAF81
A68550
856A40
07042A
4A574F
—
1.6
Fail
2.4
Fail
9.5
AAA
3.6
AA Large
1.6
Fail
—
1.5
Fail
5.7
AA
2.2
Fail
2.4
Fail
1.5
Fail
—
3.9
AA Large
1.5
Fail
9.5
AAA
5.7
AA
3.9
AA Large
—
2.6
Fail
3.6
AA Large
2.2
Fail
1.5
Fail
2.6
Fail
—
White BG
2.1Fail
3.4AA Large
5.1AA
19.8AAA
7.6AAA
Black BG
10.0AAA
6.1AA
4.1AA Large
1.1Fail
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBF8C
98975D
79794A
060621
505051

Deuteranopia

C1C38F
9A9C60
7B7D4D
06061F
4F4E51

Tritanopia

CB9597
A46769
845254
071A18
4B5253

Achromatopsia

B2B2B2
898989
6D6D6D
090909
525252

Shades & Tints Shades & Tints

#CCAF81

Dark
Light

#A68550

Dark
Light

#856A40

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccaf81;
  --color-2: #a68550;
  --color-3: #856a40;
  --color-4: #07042a;
  --color-5: #4a574f;
}

SCSS

$color-1: #ccaf81;
$color-2: #a68550;
$color-3: #856a40;
$color-4: #07042a;
$color-5: #4a574f;

TAILWIND

colors: {
  'brand-1': '#ccaf81',
  'brand-2': '#a68550',
  'brand-3': '#856a40',
  'brand-4': '#07042a',
  'brand-5': '#4a574f',
}

RGB Array

[204, 175, 129], [166, 133, 80], [133, 106, 64], [7, 4, 42], [74, 87, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #CCAF81, #A68550, #856A40, #07042A, #4A574F is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #ccaf81; --color-2: #a68550; --color-3: #856a40; --color-4: #07042a; --color-5: #4a574f. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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. 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