#D3C385 + #E7CD9A + #D1A870 + #74918F + #EFE5CC · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D3C385

Ginger · BurlyWood · Sunflower

HEX

#D3C385

RGB

rgb(211, 195, 133)

HSL

hsl(48, 47%, 67%)

HSB

hsb(48, 37%, 83%)

CMYK

cmyk(0%, 8%, 37%, 17%)

Oklch

oklch(81.6% 0.082 95.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E7CD9A

Goose Yellow · BurlyWood · Sunflower

HEX

#E7CD9A

RGB

rgb(231, 205, 154)

HSL

hsl(40, 62%, 75%)

HSB

hsb(40, 33%, 91%)

CMYK

cmyk(0%, 11%, 33%, 9%)

Oklch

oklch(85.8% 0.073 83.9)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#D1A870

Ginger · Tan · Warm Sun

HEX

#D1A870

RGB

rgb(209, 168, 112)

HSL

hsl(35, 51%, 63%)

HSB

hsb(35, 46%, 82%)

CMYK

cmyk(0%, 20%, 46%, 18%)

Oklch

oklch(75.6% 0.087 74.5)

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

#74918F

Mineral Blue · LightSlateGray · Lake Green

HEX

#74918F

RGB

rgb(116, 145, 143)

HSL

hsl(176, 12%, 51%)

HSB

hsb(176, 20%, 57%)

CMYK

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

Oklch

oklch(63.4% 0.033 191.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#EFE5CC

Goose Yellow · Bisque · Lemon Cream

HEX

#EFE5CC

RGB

rgb(239, 229, 204)

HSL

hsl(43, 52%, 87%)

HSB

hsb(43, 15%, 94%)

CMYK

cmyk(0%, 4%, 15%, 6%)

Oklch

oklch(92.3% 0.035 88.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3C385

8393D2

Analogous

D29B83

D3C385

BBD283

Triadic

D3C385

83D2C3

C383D2

Split-Comp.

D3C385

83BBD2

9B83D2

Tetradic

D3C385

83D29B

8393D2

D283BB

Contrast Matrix WCAG 2.1 Contrast

D3C385	E7CD9A	D1A870	74918F	EFE5CC
—	1.1 Fail	1.2 Fail	1.9 Fail	1.4 Fail
1.1 Fail	—	1.4 Fail	2.2 Fail	1.2 Fail
1.2 Fail	1.4 Fail	—	1.5 Fail	1.8 Fail
1.9 Fail	2.2 Fail	1.5 Fail	—	2.7 Fail
1.4 Fail	1.2 Fail	1.8 Fail	2.7 Fail	—

White BG

1.8Fail

1.5Fail

2.2Fail

3.4AA Large

1.3Fail

Black BG

11.9AAA

13.6AAA

9.5AAA

6.2AA

16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCC94

DCDCA6

BFBF7E

81818F

EBEBD2

Deuteranopia

CDCE98

DDDFA9

C2C581

7F7D90

EBECD4

Tritanopia

D2A0A2

E6B0B2

CF888B

759090

EED7D8

Achromatopsia

C1C1C1

CFCFCF

AEAEAE

888888

E5E5E5

Shades & Tints Shades & Tints

#D3C385

Dark

Light

#E7CD9A

Dark

Light

#D1A870

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3c385;
  --color-2: #e7cd9a;
  --color-3: #d1a870;
  --color-4: #74918f;
  --color-5: #efe5cc;
}

SCSS

$color-1: #d3c385;
$color-2: #e7cd9a;
$color-3: #d1a870;
$color-4: #74918f;
$color-5: #efe5cc;

TAILWIND

colors: {
  'brand-1': '#d3c385',
  'brand-2': '#e7cd9a',
  'brand-3': '#d1a870',
  'brand-4': '#74918f',
  'brand-5': '#efe5cc',
}

RGB Array

[211, 195, 133], [231, 205, 154], [209, 168, 112], [116, 145, 143], [239, 229, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #D3C385, #E7CD9A, #D1A870, #74918F, #EFE5CC is ideal for: health products, baby brands, fresh-style blogs. 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: #d3c385; --color-2: #e7cd9a; --color-3: #d1a870; --color-4: #74918f; --color-5: #efe5cc. 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. 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