← Back to Editor

#658A5C · #B9D963 · #FCF2E9 · #5FB38B · #4F615B

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#658A5C

Celadon · DimGray · Olive Green

HEX
#658A5C
RGB
rgb(101, 138, 92)
HSL
hsl(108, 20%, 45%)
HSB
hsb(108, 33%, 54%)
CMYK
cmyk(27%, 0%, 33%, 46%)
Oklch
oklch(59.3% 0.080 139.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#B9D963

Willow Green · Tan · Apple Green

HEX
#B9D963
RGB
rgb(185, 217, 99)
HSL
hsl(76, 61%, 62%)
HSB
hsb(76, 54%, 85%)
CMYK
cmyk(15%, 0%, 54%, 15%)
Oklch
oklch(83.8% 0.149 122.3)

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

#FCF2E9

Apricot · Linen · Peach Orange

HEX
#FCF2E9
RGB
rgb(252, 242, 233)
HSL
hsl(28, 76%, 95%)
HSB
hsb(28, 8%, 99%)
CMYK
cmyk(0%, 4%, 8%, 1%)
Oklch
oklch(96.7% 0.016 64.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#5FB38B

Mineral Blue · CadetBlue · Olive Green

HEX
#5FB38B
RGB
rgb(95, 179, 139)
HSL
hsl(151, 36%, 54%)
HSB
hsb(151, 47%, 70%)
CMYK
cmyk(47%, 0%, 22%, 30%)
Oklch
oklch(70.2% 0.102 161.5)

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

#4F615B

Mineral Blue · DimGray · Mint Ice

HEX
#4F615B
RGB
rgb(79, 97, 91)
HSL
hsl(160, 10%, 35%)
HSB
hsb(160, 19%, 38%)
CMYK
cmyk(19%, 0%, 6%, 62%)
Oklch
oklch(47.6% 0.024 173.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

658A5C
815C8A

Analogous

7C8A5C
658A5C
5C8A6A

Triadic

658A5C
5C658A
8A5C65

Split-Comp.

658A5C
6A5C8A
8A5C7C

Tetradic

658A5C
5C7C8A
815C8A
8A6A5C

Contrast Matrix WCAG 2.1 Contrast

658A5C
B9D963
FCF2E9
5FB38B
4F615B
—
2.5
Fail
3.6
AA Large
1.6
Fail
1.7
Fail
2.5
Fail
—
1.4
Fail
1.6
Fail
4.1
AA Large
3.6
AA Large
1.4
Fail
—
2.3
Fail
6.0
AA
1.6
Fail
1.6
Fail
2.3
Fail
—
2.6
Fail
1.7
Fail
4.1
AA Large
6.0
AA
2.6
Fail
—
White BG
3.9AA Large
1.6Fail
1.1Fail
2.5Fail
6.6AA
Black BG
5.3AA
13.2AAA
19.0AAA
8.3AAA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

757567
C7C780
F8F8EB
838495
57575C

Deuteranopia

73706A
C5C386
F8F9EC
7F7897
56545D

Tritanopia

677072
BB969B
FBEDED
639C9E
505E5E

Achromatopsia

7A7A7A
C2C2C2
F4F4F4
959595
5B5B5B

Shades & Tints Shades & Tints

#658A5C

Dark
Light

#B9D963

Dark
Light

#FCF2E9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #658a5c;
  --color-2: #b9d963;
  --color-3: #fcf2e9;
  --color-4: #5fb38b;
  --color-5: #4f615b;
}

SCSS

$color-1: #658a5c;
$color-2: #b9d963;
$color-3: #fcf2e9;
$color-4: #5fb38b;
$color-5: #4f615b;

TAILWIND

colors: {
  'brand-1': '#658a5c',
  'brand-2': '#b9d963',
  'brand-3': '#fcf2e9',
  'brand-4': '#5fb38b',
  'brand-5': '#4f615b',
}

RGB Array

[101, 138, 92], [185, 217, 99], [252, 242, 233], [95, 179, 139], [79, 97, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #658A5C, #B9D963, #FCF2E9, #5FB38B, #4F615B is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #658a5c; --color-2: #b9d963; --color-3: #fcf2e9; --color-4: #5fb38b; --color-5: #4f615b. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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