#89CDA5 + #C3D993 + #F0BB6C + #F39275 + #9A8263 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#89CDA5

Celadon · DarkSeaGreen · Apple Green

HEX

#89CDA5

RGB

rgb(137, 205, 165)

HSL

hsl(145, 40%, 67%)

HSB

hsb(145, 33%, 80%)

CMYK

cmyk(33%, 0%, 20%, 20%)

Oklch

oklch(79.2% 0.090 157.8)

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

#C3D993

Willow Green · Tan · Apple Green

HEX

#C3D993

RGB

rgb(195, 217, 147)

HSL

hsl(79, 48%, 71%)

HSB

hsb(79, 32%, 85%)

CMYK

cmyk(10%, 0%, 32%, 15%)

Oklch

oklch(85.2% 0.095 122.6)

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

#F0BB6C

Ginger · SandyBrown · Warm Sun

HEX

#F0BB6C

RGB

rgb(240, 187, 108)

HSL

hsl(36, 81%, 68%)

HSB

hsb(36, 55%, 94%)

CMYK

cmyk(0%, 22%, 55%, 6%)

Oklch

oklch(82.4% 0.115 76.0)

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

#F39275

Peach Pink · DarkSalmon · Coral Red

HEX

#F39275

RGB

rgb(243, 146, 117)

HSL

hsl(14, 84%, 71%)

HSB

hsb(14, 52%, 95%)

CMYK

cmyk(0%, 40%, 52%, 5%)

Oklch

oklch(75.5% 0.125 37.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#9A8263

Ochre · Gray · Amber Brown

HEX

#9A8263

RGB

rgb(154, 130, 99)

HSL

hsl(34, 22%, 50%)

HSB

hsb(34, 36%, 60%)

CMYK

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

Oklch

oklch(62.1% 0.053 73.7)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

89CDA5

CD89B0

Analogous

8FCD89

89CDA5

89CDC7

Triadic

89CDA5

A589CD

CDA589

Split-Comp.

89CDA5

C789CD

CD898F

Tetradic

89CDA5

898FCD

CD89B0

CDC789

Contrast Matrix WCAG 2.1 Contrast

89CDA5	C3D993	F0BB6C	F39275	9A8263
—	1.2 Fail	1.1 Fail	1.2 Fail	2.0 Fail
1.2 Fail	—	1.1 Fail	1.5 Fail	2.4 Fail
1.1 Fail	1.1 Fail	—	1.3 Fail	2.1 Fail
1.2 Fail	1.5 Fail	1.3 Fail	—	1.6 Fail
2.0 Fail	2.4 Fail	2.1 Fail	1.6 Fail	—

White BG

1.9Fail

1.5Fail

1.7Fail

2.3Fail

3.7AA Large

Black BG

11.3AAA

13.7AAA

12.0AAA

9.2AAA

5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A7AF

CDCDA4

D9D97F

C9C87C

908F6B

Deuteranopia

A39DB1

CBCAA8

DCE084

CFD67E

91936C

Tritanopia

8CB6B8

C4B1B4

ED8E92

EE8283

997072

Achromatopsia

B4B4B4

CACACA

C2C2C2

ACACAC

868686

Shades & Tints Shades & Tints

#89CDA5

Dark

Light

#C3D993

Dark

Light

#F0BB6C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #89cda5;
  --color-2: #c3d993;
  --color-3: #f0bb6c;
  --color-4: #f39275;
  --color-5: #9a8263;
}

SCSS

$color-1: #89cda5;
$color-2: #c3d993;
$color-3: #f0bb6c;
$color-4: #f39275;
$color-5: #9a8263;

TAILWIND

colors: {
  'brand-1': '#89cda5',
  'brand-2': '#c3d993',
  'brand-3': '#f0bb6c',
  'brand-4': '#f39275',
  'brand-5': '#9a8263',
}

RGB Array

[137, 205, 165], [195, 217, 147], [240, 187, 108], [243, 146, 117], [154, 130, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #89CDA5, #C3D993, #F0BB6C, #F39275, #9A8263 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: #89cda5; --color-2: #c3d993; --color-3: #f0bb6c; --color-4: #f39275; --color-5: #9a8263. 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