#659C97 + #7EA392 + #F9EBBC + #F8D9A0 + #F2B767 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#659C97

Mineral Blue · CadetBlue · Mint Ice

HEX

#659C97

RGB

rgb(101, 156, 151)

HSL

hsl(175, 22%, 50%)

HSB

hsb(175, 35%, 61%)

CMYK

cmyk(35%, 0%, 3%, 39%)

Oklch

oklch(65.3% 0.059 188.6)

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

#7EA392

Mineral Blue · LightSlateGray · Olive Green

HEX

#7EA392

RGB

rgb(126, 163, 146)

HSL

hsl(152, 17%, 57%)

HSB

hsb(152, 23%, 64%)

CMYK

cmyk(23%, 0%, 10%, 36%)

Oklch

oklch(68.3% 0.048 165.2)

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

#F9EBBC

Goose Yellow · Bisque · Lemon Cream

HEX

#F9EBBC

RGB

rgb(249, 235, 188)

HSL

hsl(46, 84%, 86%)

HSB

hsb(46, 24%, 98%)

CMYK

cmyk(0%, 6%, 24%, 2%)

Oklch

oklch(94.0% 0.063 93.4)

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

#F8D9A0

Goose Yellow · Wheat · Peach Orange

HEX

#F8D9A0

RGB

rgb(248, 217, 160)

HSL

hsl(39, 86%, 80%)

HSB

hsb(39, 35%, 97%)

CMYK

cmyk(0%, 13%, 35%, 3%)

Oklch

oklch(89.8% 0.081 82.4)

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

#F2B767

Ginger · SandyBrown · Warm Sun

HEX

#F2B767

RGB

rgb(242, 183, 103)

HSL

hsl(35, 84%, 68%)

HSB

hsb(35, 57%, 95%)

CMYK

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

Oklch

oklch(81.8% 0.119 73.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

659C97

9C6368

Analogous

639C7B

659C97

63849C

Triadic

659C97

97639C

9C9763

Split-Comp.

659C97

9C6384

9C7B63

Tetradic

659C97

7B639C

9C6368

849C63

Contrast Matrix WCAG 2.1 Contrast

659C97	7EA392	F9EBBC	F8D9A0	F2B767
—	1.1 Fail	2.6 Fail	2.3 Fail	1.7 Fail
1.1 Fail	—	2.3 Fail	2.0 Fail	1.6 Fail
2.6 Fail	2.3 Fail	—	1.1 Fail	1.5 Fail
2.3 Fail	2.0 Fail	1.1 Fail	—	1.3 Fail
1.7 Fail	1.6 Fail	1.5 Fail	1.3 Fail	—

White BG

3.1AA Large

2.8Fail

1.2Fail

1.4Fail

1.8Fail

Black BG

6.8AA

7.5AAA

17.6AAA

15.4AAA

11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7D98

8E8E96

F3F3C7

EBEAAE

D8D87A

Deuteranopia

7A7599

8C8997

F4F5CA

ECEFB1

DCE07F

Tritanopia

689999

80999A

F8D0D2

F6B9BB

EF8A8D

Achromatopsia

8B8B8B

969696

EAEAEA

DCDCDC

C0C0C0

Shades & Tints Shades & Tints

#659C97

Dark

Light

#7EA392

Dark

Light

#F9EBBC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #659c97;
  --color-2: #7ea392;
  --color-3: #f9ebbc;
  --color-4: #f8d9a0;
  --color-5: #f2b767;
}

SCSS

$color-1: #659c97;
$color-2: #7ea392;
$color-3: #f9ebbc;
$color-4: #f8d9a0;
$color-5: #f2b767;

TAILWIND

colors: {
  'brand-1': '#659c97',
  'brand-2': '#7ea392',
  'brand-3': '#f9ebbc',
  'brand-4': '#f8d9a0',
  'brand-5': '#f2b767',
}

RGB Array

[101, 156, 151], [126, 163, 146], [249, 235, 188], [248, 217, 160], [242, 183, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #659C97, #7EA392, #F9EBBC, #F8D9A0, #F2B767 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: #659c97; --color-2: #7ea392; --color-3: #f9ebbc; --color-4: #f8d9a0; --color-5: #f2b767. 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