← Back to Editor

#686258 · #FFB774 · #FFDAB8 · #CBDBBE · #B2DCC1

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#686258

Ochre · DimGray · Charcoal

HEX
#686258
RGB
rgb(104, 98, 88)
HSL
hsl(38, 8%, 38%)
HSB
hsb(38, 15%, 41%)
CMYK
cmyk(0%, 6%, 15%, 59%)
Oklch
oklch(49.9% 0.017 80.6)

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

#FFB774

Apricot · LightSalmon · Warm Sun

HEX
#FFB774
RGB
rgb(255, 183, 116)
HSL
hsl(29, 100%, 73%)
HSB
hsb(29, 55%, 100%)
CMYK
cmyk(0%, 28%, 55%, 0%)
Oklch
oklch(83.3% 0.118 63.0)

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

#FFDAB8

Apricot · Wheat · Peach Orange

HEX
#FFDAB8
RGB
rgb(255, 218, 184)
HSL
hsl(29, 100%, 86%)
HSB
hsb(29, 28%, 100%)
CMYK
cmyk(0%, 15%, 28%, 0%)
Oklch
oklch(91.1% 0.061 64.5)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CBDBBE

Celadon · LightGray · Apple Green

HEX
#CBDBBE
RGB
rgb(203, 219, 190)
HSL
hsl(93, 29%, 80%)
HSB
hsb(93, 13%, 86%)
CMYK
cmyk(7%, 0%, 13%, 14%)
Oklch
oklch(87.2% 0.043 131.0)

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

#B2DCC1

Celadon · Silver · Apple Green

HEX
#B2DCC1
RGB
rgb(178, 220, 193)
HSL
hsl(141, 38%, 78%)
HSB
hsb(141, 19%, 86%)
CMYK
cmyk(19%, 0%, 12%, 14%)
Oklch
oklch(85.7% 0.058 156.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

686258
595F69

Analogous

695B59
686258
676959

Triadic

686258
596963
635969

Split-Comp.

686258
596769
5B5969

Tetradic

686258
59695B
595F69
695967

Contrast Matrix WCAG 2.1 Contrast

686258
FFB774
FFDAB8
CBDBBE
B2DCC1
—
3.5
AA Large
4.6
AA
4.1
AA Large
4.0
AA Large
3.5
AA Large
—
1.3
Fail
1.2
Fail
1.1
Fail
4.6
AA
1.3
Fail
—
1.1
Fail
1.1
Fail
4.1
AA Large
1.2
Fail
1.1
Fail
—
1.0
Fail
4.0
AA Large
1.1
Fail
1.1
Fail
1.0
Fail
—
White BG
6.0AA
1.7Fail
1.3Fail
1.5Fail
1.5Fail
Black BG
3.5AA Large
12.3AAA
16.0AAA
14.4AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

65655A
E0DF84
EFEFC0
D2D2C5
C4C5C8

Deuteranopia

66665B
E4E988
F1F4C2
D1D0C7
C2BFC9

Tritanopia

685C5D
FB9194
FDC7C8
CCCBCC
B4CDCE

Achromatopsia

636363
C5C5C5
E1E1E1
D3D3D3
CCCCCC

Shades & Tints Shades & Tints

#686258

Dark
Light

#FFB774

Dark
Light

#FFDAB8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #686258;
  --color-2: #ffb774;
  --color-3: #ffdab8;
  --color-4: #cbdbbe;
  --color-5: #b2dcc1;
}

SCSS

$color-1: #686258;
$color-2: #ffb774;
$color-3: #ffdab8;
$color-4: #cbdbbe;
$color-5: #b2dcc1;

TAILWIND

colors: {
  'brand-1': '#686258',
  'brand-2': '#ffb774',
  'brand-3': '#ffdab8',
  'brand-4': '#cbdbbe',
  'brand-5': '#b2dcc1',
}

RGB Array

[104, 98, 88], [255, 183, 116], [255, 218, 184], [203, 219, 190], [178, 220, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #686258, #FFB774, #FFDAB8, #CBDBBE, #B2DCC1 is ideal for: health products, baby brands, fresh-style blogs, 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: #686258; --color-2: #ffb774; --color-3: #ffdab8; --color-4: #cbdbbe; --color-5: #b2dcc1. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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