#FFAF97 + #6E9F8A + #68B595 + #C5C796 + #EBE0B2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFAF97

Peach Pink · LightSalmon · Coral Red

HEX

#FFAF97

RGB

rgb(255, 175, 151)

HSL

hsl(14, 100%, 80%)

HSB

hsb(14, 41%, 100%)

CMYK

cmyk(0%, 31%, 41%, 0%)

Oklch

oklch(82.5% 0.100 37.4)

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

#6E9F8A

Mineral Blue · CadetBlue · Olive Green

HEX

#6E9F8A

RGB

rgb(110, 159, 138)

HSL

hsl(154, 20%, 53%)

HSB

hsb(154, 31%, 62%)

CMYK

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

Oklch

oklch(66.1% 0.061 166.0)

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

#68B595

Mineral Blue · CadetBlue · Olive Green

HEX

#68B595

RGB

rgb(104, 181, 149)

HSL

hsl(155, 34%, 56%)

HSB

hsb(155, 43%, 71%)

CMYK

cmyk(43%, 0%, 18%, 29%)

Oklch

oklch(71.4% 0.091 165.3)

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

#C5C796

Fresh Green · Tan · Sunflower

HEX

#C5C796

RGB

rgb(197, 199, 150)

HSL

hsl(62, 30%, 68%)

HSB

hsb(62, 25%, 78%)

CMYK

cmyk(1%, 0%, 25%, 22%)

Oklch

oklch(81.6% 0.065 109.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#EBE0B2

Goose Yellow · Wheat · Lemon Cream

HEX

#EBE0B2

RGB

rgb(235, 224, 178)

HSL

hsl(48, 59%, 81%)

HSB

hsb(48, 24%, 92%)

CMYK

cmyk(0%, 5%, 24%, 8%)

Oklch

oklch(90.4% 0.061 96.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFAF97

99E7FF

Analogous

FF99B4

FFAF97

FFE499

Triadic

FFAF97

99FFB1

B199FF

Split-Comp.

FFAF97

99FFE4

99B4FF

Tetradic

FFAF97

B4FF99

99E7FF

E499FF

Contrast Matrix WCAG 2.1 Contrast

FFAF97	6E9F8A	68B595	C5C796	EBE0B2
—	1.7 Fail	1.4 Fail	1.0 Fail	1.3 Fail
1.7 Fail	—	1.2 Fail	1.7 Fail	2.3 Fail
1.4 Fail	1.2 Fail	—	1.4 Fail	1.8 Fail
1.0 Fail	1.7 Fail	1.4 Fail	—	1.3 Fail
1.3 Fail	2.3 Fail	1.8 Fail	1.3 Fail	—

White BG

1.8Fail

3.0AA Large

2.4Fail

1.8Fail

1.3Fail

Black BG

11.8AAA

7.0AA

8.6AAA

12.0AAA

15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDC9D

83848F

898A9D

C6C6A2

E6E6BD

Deuteranopia

E1E79E

807D90

857F9F

C6C6A5

E7E8C0

Tritanopia

FBA1A2

709394

6CA3A4

C5ABAD

EAC6C8

Achromatopsia

C4C4C4

8E8E8E

9A9A9A

C1C1C1

DEDEDE

Shades & Tints Shades & Tints

#FFAF97

Dark

Light

#6E9F8A

Dark

Light

#68B595

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffaf97;
  --color-2: #6e9f8a;
  --color-3: #68b595;
  --color-4: #c5c796;
  --color-5: #ebe0b2;
}

SCSS

$color-1: #ffaf97;
$color-2: #6e9f8a;
$color-3: #68b595;
$color-4: #c5c796;
$color-5: #ebe0b2;

TAILWIND

colors: {
  'brand-1': '#ffaf97',
  'brand-2': '#6e9f8a',
  'brand-3': '#68b595',
  'brand-4': '#c5c796',
  'brand-5': '#ebe0b2',
}

RGB Array

[255, 175, 151], [110, 159, 138], [104, 181, 149], [197, 199, 150], [235, 224, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFAF97, #6E9F8A, #68B595, #C5C796, #EBE0B2 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: #ffaf97; --color-2: #6e9f8a; --color-3: #68b595; --color-4: #c5c796; --color-5: #ebe0b2. 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