#F2E676 + #D6AC7A + #B08284 + #5E6E7B + #346778 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F2E676

Fresh Green · Khaki · Sunflower

HEX

#F2E676

RGB

rgb(242, 230, 118)

HSL

hsl(54, 83%, 71%)

HSB

hsb(54, 51%, 95%)

CMYK

cmyk(0%, 5%, 51%, 5%)

Oklch

oklch(91.2% 0.134 103.2)

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

#D6AC7A

Ginger · BurlyWood · Warm Sun

HEX

#D6AC7A

RGB

rgb(214, 172, 122)

HSL

hsl(33, 53%, 66%)

HSB

hsb(33, 43%, 84%)

CMYK

cmyk(0%, 20%, 43%, 16%)

Oklch

oklch(77.1% 0.082 71.0)

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

#B08284

Crimson · Gray · Passion Red

HEX

#B08284

RGB

rgb(176, 130, 132)

HSL

hsl(357, 23%, 60%)

HSB

hsb(357, 26%, 69%)

CMYK

cmyk(0%, 26%, 25%, 31%)

Oklch

oklch(65.2% 0.057 15.9)

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

#5E6E7B

Slate Blue · DimGray · Navy Blue

HEX

#5E6E7B

RGB

rgb(94, 110, 123)

HSL

hsl(207, 13%, 43%)

HSB

hsb(207, 24%, 48%)

CMYK

cmyk(24%, 11%, 0%, 52%)

Oklch

oklch(53.0% 0.028 242.7)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#346778

Slate Blue · DarkSlateGray · Mint Ice

HEX

#346778

RGB

rgb(52, 103, 120)

HSL

hsl(195, 40%, 34%)

HSB

hsb(195, 57%, 47%)

CMYK

cmyk(57%, 14%, 0%, 53%)

Oklch

oklch(48.6% 0.061 222.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2E676

7884F2

Analogous

F2A978

F2E676

C1F278

Triadic

F2E676

78F2E6

E678F2

Split-Comp.

F2E676

78C1F2

A978F2

Tetradic

F2E676

78F2A9

7884F2

F278C1

Contrast Matrix WCAG 2.1 Contrast

F2E676	D6AC7A	B08284	5E6E7B	346778
—	1.6 Fail	2.6 Fail	4.1 AA Large	4.9 AA
1.6 Fail	—	1.6 Fail	2.5 Fail	3.0 Fail
2.6 Fail	1.6 Fail	—	1.6 Fail	1.9 Fail
4.1 AA Large	2.5 Fail	1.6 Fail	—	1.2 Fail
4.9 AA	3.0 Fail	1.9 Fail	1.2 Fail	—

White BG

1.3Fail

2.1Fail

3.3AA Large

5.3AA

6.3AA

Black BG

16.4AAA

10.0AAA

6.4AA

4.0AA Large

3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDED91

C4C386

9C9C84

656578

4A4B74

Deuteranopia

EEEE98

C6C989

9FA283

646377

474373

Tritanopia

F1A6AB

D49092

AE8383

5F7575

377170

Achromatopsia

DDDDDD

B3B3B3

909090

6B6B6B

5A5A5A

Shades & Tints Shades & Tints

#F2E676

Dark

Light

#D6AC7A

Dark

Light

#B08284

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2e676;
  --color-2: #d6ac7a;
  --color-3: #b08284;
  --color-4: #5e6e7b;
  --color-5: #346778;
}

SCSS

$color-1: #f2e676;
$color-2: #d6ac7a;
$color-3: #b08284;
$color-4: #5e6e7b;
$color-5: #346778;

TAILWIND

colors: {
  'brand-1': '#f2e676',
  'brand-2': '#d6ac7a',
  'brand-3': '#b08284',
  'brand-4': '#5e6e7b',
  'brand-5': '#346778',
}

RGB Array

[242, 230, 118], [214, 172, 122], [176, 130, 132], [94, 110, 123], [52, 103, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F2E676, #D6AC7A, #B08284, #5E6E7B, #346778 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: #f2e676; --color-2: #d6ac7a; --color-3: #b08284; --color-4: #5e6e7b; --color-5: #346778. 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