#38C2B4 + #C9AE97 + #76CFC2 + #D9CEBD + #F2E7D5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#38C2B4

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#38C2B4

RGB

rgb(56, 194, 180)

HSL

hsl(174, 55%, 49%)

HSB

hsb(174, 71%, 76%)

CMYK

cmyk(71%, 0%, 7%, 24%)

Oklch

oklch(73.9% 0.117 185.0)

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

#C9AE97

Apricot · Tan · Warm Sun

HEX

#C9AE97

RGB

rgb(201, 174, 151)

HSL

hsl(28, 32%, 69%)

HSB

hsb(28, 25%, 79%)

CMYK

cmyk(0%, 13%, 25%, 21%)

Oklch

oklch(76.8% 0.045 62.5)

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

#76CFC2

Jade · MediumAquaMarine · Lake Green

HEX

#76CFC2

RGB

rgb(118, 207, 194)

HSL

hsl(171, 48%, 64%)

HSB

hsb(171, 43%, 81%)

CMYK

cmyk(43%, 0%, 6%, 19%)

Oklch

oklch(79.5% 0.088 183.6)

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

#D9CEBD

Goose Yellow · LightGray · Peach Orange

HEX

#D9CEBD

RGB

rgb(217, 206, 189)

HSL

hsl(36, 27%, 80%)

HSB

hsb(36, 13%, 85%)

CMYK

cmyk(0%, 5%, 13%, 15%)

Oklch

oklch(85.6% 0.026 78.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F2E7D5

Goose Yellow · Beige · Peach Orange

HEX

#F2E7D5

RGB

rgb(242, 231, 213)

HSL

hsl(37, 53%, 89%)

HSB

hsb(37, 12%, 95%)

CMYK

cmyk(0%, 5%, 12%, 5%)

Oklch

oklch(93.2% 0.027 80.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

38C2B4

C23846

Analogous

38C26F

38C2B4

388BC2

Triadic

38C2B4

B438C2

C2B438

Split-Comp.

38C2B4

C2388B

C26F38

Tetradic

38C2B4

6F38C2

C23846

8BC238

Contrast Matrix WCAG 2.1 Contrast

38C2B4	C9AE97	76CFC2	D9CEBD	F2E7D5
—	1.0 Fail	1.2 Fail	1.4 Fail	1.8 Fail
1.0 Fail	—	1.1 Fail	1.4 Fail	1.7 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.5 Fail
1.4 Fail	1.4 Fail	1.2 Fail	—	1.3 Fail
1.8 Fail	1.7 Fail	1.5 Fail	1.3 Fail	—

White BG

2.2Fail

2.1Fail

1.8Fail

1.6Fail

1.2Fail

Black BG

9.5AAA

10.0AAA

11.5AAA

13.5AAA

17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7475B7

BDBD9D

9D9DC5

D4D4C1

EDEDD9

Deuteranopia

6C61B8

BFC19E

9791C6

D5D6C2

EEEFDA

Tritanopia

3FBABB

C8A1A2

7AC8C8

D8C4C5

F1DDDE

Achromatopsia

979797

B3B3B3

CFCFCF

E8E8E8

Shades & Tints Shades & Tints

#38C2B4

Dark

Light

#C9AE97

Dark

Light

#76CFC2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #38c2b4;
  --color-2: #c9ae97;
  --color-3: #76cfc2;
  --color-4: #d9cebd;
  --color-5: #f2e7d5;
}

SCSS

$color-1: #38c2b4;
$color-2: #c9ae97;
$color-3: #76cfc2;
$color-4: #d9cebd;
$color-5: #f2e7d5;

TAILWIND

colors: {
  'brand-1': '#38c2b4',
  'brand-2': '#c9ae97',
  'brand-3': '#76cfc2',
  'brand-4': '#d9cebd',
  'brand-5': '#f2e7d5',
}

RGB Array

[56, 194, 180], [201, 174, 151], [118, 207, 194], [217, 206, 189], [242, 231, 213]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #38C2B4, #C9AE97, #76CFC2, #D9CEBD, #F2E7D5 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: #38c2b4; --color-2: #c9ae97; --color-3: #76cfc2; --color-4: #d9cebd; --color-5: #f2e7d5. 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 general-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