#99BA8A + #FFEBAE + #97DABB + #AE8B8D + #EB4B4C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#99BA8A

Celadon · DarkSeaGreen · Apple Green

HEX

#99BA8A

RGB

rgb(153, 186, 138)

HSL

hsl(101, 26%, 64%)

HSB

hsb(101, 26%, 73%)

CMYK

cmyk(18%, 0%, 26%, 27%)

Oklch

oklch(75.2% 0.076 136.0)

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

#FFEBAE

Goose Yellow · Wheat · Lemon Cream

HEX

#FFEBAE

RGB

rgb(255, 235, 174)

HSL

hsl(45, 100%, 84%)

HSB

hsb(45, 32%, 100%)

CMYK

cmyk(0%, 8%, 32%, 0%)

Oklch

oklch(94.2% 0.081 92.1)

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

#97DABB

Jade · LightGreen · Apple Green

HEX

#97DABB

RGB

rgb(151, 218, 187)

HSL

hsl(152, 48%, 72%)

HSB

hsb(152, 31%, 85%)

CMYK

cmyk(31%, 0%, 14%, 15%)

Oklch

oklch(83.5% 0.081 164.1)

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

#AE8B8D

Peach Pink · DarkGray · Coral Red

HEX

#AE8B8D

RGB

rgb(174, 139, 141)

HSL

hsl(357, 18%, 61%)

HSB

hsb(357, 20%, 68%)

CMYK

cmyk(0%, 20%, 19%, 32%)

Oklch

oklch(67.0% 0.043 14.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#EB4B4C

Peach Pink · Tomato · Coral Red

HEX

#EB4B4C

RGB

rgb(235, 75, 76)

HSL

hsl(360, 80%, 61%)

HSB

hsb(360, 68%, 92%)

CMYK

cmyk(0%, 68%, 68%, 8%)

Oklch

oklch(63.8% 0.197 24.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Soft Aurora

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99BA8A

AC8BBB

Analogous

B2BB8B

99BA8A

8BBB94

Triadic

99BA8A

8B9ABB

BB8B9A

Split-Comp.

99BA8A

948BBB

BB8BB2

Tetradic

99BA8A

8BB2BB

AC8BBB

BB948B

Contrast Matrix WCAG 2.1 Contrast

99BA8A	FFEBAE	97DABB	AE8B8D	EB4B4C
—	1.8 Fail	1.3 Fail	1.4 Fail	1.7 Fail
1.8 Fail	—	1.4 Fail	2.6 Fail	3.1 AA Large
1.3 Fail	1.4 Fail	—	1.9 Fail	2.3 Fail
1.4 Fail	2.6 Fail	1.9 Fail	—	1.2 Fail
1.7 Fail	3.1 AA Large	2.3 Fail	1.2 Fail	—

White BG

2.2Fail

1.2Fail

1.6Fail

3.1AA Large

3.7AA Large

Black BG

9.7AAA

17.7AAA

13.1AAA

6.9AA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A896

F6F6BD

B4B5C3

9F9F8D

A6A44C

Deuteranopia

A5A398

F8F9C0

B0ABC4

A1A48C

AFBB4C

Tritanopia

9B9FA1

FEC8CB

9AC8CA

AC8C8C

E34C4C

Achromatopsia

ABABAB

EAEAEA

C2C2C2

969696

7B7B7B

Shades & Tints Shades & Tints

#99BA8A

Dark

Light

#FFEBAE

Dark

Light

#97DABB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99ba8a;
  --color-2: #ffebae;
  --color-3: #97dabb;
  --color-4: #ae8b8d;
  --color-5: #eb4b4c;
}

SCSS

$color-1: #99ba8a;
$color-2: #ffebae;
$color-3: #97dabb;
$color-4: #ae8b8d;
$color-5: #eb4b4c;

TAILWIND

colors: {
  'brand-1': '#99ba8a',
  'brand-2': '#ffebae',
  'brand-3': '#97dabb',
  'brand-4': '#ae8b8d',
  'brand-5': '#eb4b4c',
}

RGB Array

[153, 186, 138], [255, 235, 174], [151, 218, 187], [174, 139, 141], [235, 75, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #99BA8A, #FFEBAE, #97DABB, #AE8B8D, #EB4B4C 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: #99ba8a; --color-2: #ffebae; --color-3: #97dabb; --color-4: #ae8b8d; --color-5: #eb4b4c. 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