← Back to Editor

#7DC6BF · #D7B27B · #F59F3C · #FF8B5A · #907876

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 Library

Color Details Color Details

#7DC6BF

Jade · MediumAquaMarine · Lake Green

HEX
#7DC6BF
RGB
rgb(125, 198, 191)
HSL
hsl(174, 39%, 63%)
HSB
hsb(174, 37%, 78%)
CMYK
cmyk(37%, 0%, 4%, 22%)
Oklch
oklch(77.7% 0.074 188.0)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#D7B27B

Ginger · BurlyWood · Warm Sun

HEX
#D7B27B
RGB
rgb(215, 178, 123)
HSL
hsl(36, 53%, 66%)
HSB
hsb(36, 43%, 84%)
CMYK
cmyk(0%, 17%, 43%, 16%)
Oklch
oklch(78.4% 0.084 77.0)

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

#F59F3C

Ginger · SandyBrown · Warm Sun

HEX
#F59F3C
RGB
rgb(245, 159, 60)
HSL
hsl(32, 90%, 60%)
HSB
hsb(32, 76%, 96%)
CMYK
cmyk(0%, 35%, 76%, 4%)
Oklch
oklch(77.3% 0.150 65.4)

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

#FF8B5A

Apricot · Coral · Warm Sun

HEX
#FF8B5A
RGB
rgb(255, 139, 90)
HSL
hsl(18, 100%, 68%)
HSB
hsb(18, 65%, 100%)
CMYK
cmyk(0%, 45%, 65%, 0%)
Oklch
oklch(75.5% 0.155 42.9)

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

#907876

Crimson · Gray · Passion Red

HEX
#907876
RGB
rgb(144, 120, 118)
HSL
hsl(5, 10%, 51%)
HSB
hsb(5, 18%, 56%)
CMYK
cmyk(0%, 17%, 18%, 44%)
Oklch
oklch(59.5% 0.030 23.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7DC6BF
C57C83

Analogous

7CC599
7DC6BF
7CA8C5

Triadic

7DC6BF
BE7CC5
C5BE7C

Split-Comp.

7DC6BF
C57CA8
C5997C

Tetradic

7DC6BF
997CC5
C57C83
A8C57C

Contrast Matrix WCAG 2.1 Contrast

7DC6BF
D7B27B
F59F3C
FF8B5A
907876
—
1.0
Fail
1.1
Fail
1.2
Fail
2.1
Fail
1.0
Fail
—
1.1
Fail
1.2
Fail
2.1
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.9
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.8
Fail
2.1
Fail
2.1
Fail
1.9
Fail
1.8
Fail
—
White BG
2.0Fail
2.0Fail
2.1Fail
2.3Fail
4.1AA Large
Black BG
10.7AAA
10.5AAA
9.9AAA
9.1AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9DC1
C7C788
D0CF54
CDCC66
868576

Deuteranopia

9893C1
C9CC8C
D5DB5A
D4DC69
878977

Tritanopia

81C2C2
D59395
F1676B
F96F71
8F7777

Achromatopsia

AFAFAF
B7B7B7
ADADAD
A8A8A8
7F7F7F

Shades & Tints Shades & Tints

#7DC6BF

Dark
Light

#D7B27B

Dark
Light

#F59F3C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7dc6bf;
  --color-2: #d7b27b;
  --color-3: #f59f3c;
  --color-4: #ff8b5a;
  --color-5: #907876;
}

SCSS

$color-1: #7dc6bf;
$color-2: #d7b27b;
$color-3: #f59f3c;
$color-4: #ff8b5a;
$color-5: #907876;

TAILWIND

colors: {
  'brand-1': '#7dc6bf',
  'brand-2': '#d7b27b',
  'brand-3': '#f59f3c',
  'brand-4': '#ff8b5a',
  'brand-5': '#907876',
}

RGB Array

[125, 198, 191], [215, 178, 123], [245, 159, 60], [255, 139, 90], [144, 120, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #7DC6BF, #D7B27B, #F59F3C, #FF8B5A, #907876 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: #7dc6bf; --color-2: #d7b27b; --color-3: #f59f3c; --color-4: #ff8b5a; --color-5: #907876. 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