#63A48F + #929E8A + #D4A381 + #FFAB73 + #FAE09D · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#63A48F

Mineral Blue · CadetBlue · Lake Green

HEX

#63A48F

RGB

rgb(99, 164, 143)

HSL

hsl(161, 26%, 52%)

HSB

hsb(161, 40%, 64%)

CMYK

cmyk(40%, 0%, 13%, 36%)

Oklch

oklch(66.9% 0.074 171.3)

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

#929E8A

Celadon · DarkSeaGreen · Silver Sand

HEX

#929E8A

RGB

rgb(146, 158, 138)

HSL

hsl(96, 9%, 58%)

HSB

hsb(96, 13%, 62%)

CMYK

cmyk(8%, 0%, 13%, 38%)

Oklch

oklch(68.4% 0.032 132.7)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#D4A381

Apricot · Tan · Warm Sun

HEX

#D4A381

RGB

rgb(212, 163, 129)

HSL

hsl(25, 49%, 67%)

HSB

hsb(25, 39%, 83%)

CMYK

cmyk(0%, 23%, 39%, 17%)

Oklch

oklch(75.3% 0.074 56.1)

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

#FFAB73

Apricot · LightSalmon · Warm Sun

HEX

#FFAB73

RGB

rgb(255, 171, 115)

HSL

hsl(24, 100%, 73%)

HSB

hsb(24, 55%, 100%)

CMYK

cmyk(0%, 33%, 55%, 0%)

Oklch

oklch(81.2% 0.122 53.8)

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

#FAE09D

Goose Yellow · Khaki · Lemon Cream

HEX

#FAE09D

RGB

rgb(250, 224, 157)

HSL

hsl(43, 90%, 80%)

HSB

hsb(43, 37%, 98%)

CMYK

cmyk(0%, 10%, 37%, 2%)

Oklch

oklch(91.3% 0.089 89.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

63A48F

A46579

Analogous

65A470

63A48F

6599A4

Triadic

63A48F

9065A4

A49065

Split-Comp.

63A48F

A46599

A47065

Tetradic

63A48F

7065A4

A46579

99A465

Contrast Matrix WCAG 2.1 Contrast

63A48F	929E8A	D4A381	FFAB73	FAE09D
—	1.0 Fail	1.3 Fail	1.6 Fail	2.2 Fail
1.0 Fail	—	1.3 Fail	1.5 Fail	2.2 Fail
1.3 Fail	1.3 Fail	—	1.2 Fail	1.7 Fail
1.6 Fail	1.5 Fail	1.2 Fail	—	1.4 Fail
2.2 Fail	2.2 Fail	1.7 Fail	1.4 Fail	—

White BG

2.9Fail

2.8Fail

2.2Fail

1.9Fail

1.3Fail

Black BG

7.2AAA

7.5AAA

9.4AAA

11.3AAA

16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F8094

97978F

BFBE89

DBDA81

EFEFAD

Deuteranopia

7B7795

979690

C2C58B

E0E684

F0F2B1

Tritanopia

669899

939394

D29091

FB8B8E

F9BABD

Achromatopsia

8E8E8E

989898

AEAEAE

BEBEBE

E0E0E0

Shades & Tints Shades & Tints

#63A48F

Dark

Light

#929E8A

Dark

Light

#D4A381

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #63a48f;
  --color-2: #929e8a;
  --color-3: #d4a381;
  --color-4: #ffab73;
  --color-5: #fae09d;
}

SCSS

$color-1: #63a48f;
$color-2: #929e8a;
$color-3: #d4a381;
$color-4: #ffab73;
$color-5: #fae09d;

TAILWIND

colors: {
  'brand-1': '#63a48f',
  'brand-2': '#929e8a',
  'brand-3': '#d4a381',
  'brand-4': '#ffab73',
  'brand-5': '#fae09d',
}

RGB Array

[99, 164, 143], [146, 158, 138], [212, 163, 129], [255, 171, 115], [250, 224, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #63A48F, #929E8A, #D4A381, #FFAB73, #FAE09D 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: #63a48f; --color-2: #929e8a; --color-3: #d4a381; --color-4: #ffab73; --color-5: #fae09d. 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