← Back to Editor

#638F6A · #84A27B · #A5B58E · #C6C89F · #E7DBB1

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#638F6A

Celadon · DimGray · Olive Green

HEX
#638F6A
RGB
rgb(99, 143, 106)
HSL
hsl(130, 18%, 47%)
HSB
hsb(130, 31%, 56%)
CMYK
cmyk(31%, 0%, 26%, 44%)
Oklch
oklch(60.7% 0.074 148.8)

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

#84A27B

Celadon · Gray · Olive Green

HEX
#84A27B
RGB
rgb(132, 162, 123)
HSL
hsl(106, 17%, 56%)
HSB
hsb(106, 24%, 64%)
CMYK
cmyk(19%, 0%, 24%, 36%)
Oklch
oklch(67.9% 0.065 138.5)

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

#A5B58E

Willow Green · DarkSeaGreen · Apple Green

HEX
#A5B58E
RGB
rgb(165, 181, 142)
HSL
hsl(85, 21%, 63%)
HSB
hsb(85, 22%, 71%)
CMYK
cmyk(9%, 0%, 22%, 29%)
Oklch
oklch(75.0% 0.057 125.9)

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

#C6C89F

Fresh Green · Tan · Sunflower

HEX
#C6C89F
RGB
rgb(198, 200, 159)
HSL
hsl(63, 27%, 70%)
HSB
hsb(63, 21%, 78%)
CMYK
cmyk(1%, 0%, 21%, 22%)
Oklch
oklch(82.1% 0.055 109.9)

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

#E7DBB1

Goose Yellow · Wheat · Lemon Cream

HEX
#E7DBB1
RGB
rgb(231, 219, 177)
HSL
hsl(47, 53%, 80%)
HSB
hsb(47, 23%, 91%)
CMYK
cmyk(0%, 5%, 23%, 9%)
Oklch
oklch(89.1% 0.057 94.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

638F6A
8D6286

Analogous

718D62
638F6A
628D7F

Triadic

638F6A
69628D
8D6962

Split-Comp.

638F6A
7F628D
8D6271

Tetradic

638F6A
62718D
8D6286
8D7F62

Contrast Matrix WCAG 2.1 Contrast

638F6A
84A27B
A5B58E
C6C89F
E7DBB1
—
1.3
Fail
1.7
Fail
2.1
Fail
2.7
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.0
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
1.2
Fail
2.7
Fail
2.0
Fail
1.6
Fail
1.2
Fail
—
White BG
3.7AA Large
2.8Fail
2.2Fail
1.7Fail
1.4Fail
Black BG
5.7AA
7.4AAA
9.6AAA
12.2AAA
15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

767673
919184
ACAC97
C7C7A9
E2E2BB

Deuteranopia

747075
8F8D87
ABAA9A
C7C7AB
E3E3BE

Tritanopia

657A7C
868C8E
A69FA1
C6B1B2
E6C3C5

Achromatopsia

7E7E7E
959595
ACACAC
C3C3C3
DADADA

Shades & Tints Shades & Tints

#638F6A

Dark
Light

#84A27B

Dark
Light

#A5B58E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #638f6a;
  --color-2: #84a27b;
  --color-3: #a5b58e;
  --color-4: #c6c89f;
  --color-5: #e7dbb1;
}

SCSS

$color-1: #638f6a;
$color-2: #84a27b;
$color-3: #a5b58e;
$color-4: #c6c89f;
$color-5: #e7dbb1;

TAILWIND

colors: {
  'brand-1': '#638f6a',
  'brand-2': '#84a27b',
  'brand-3': '#a5b58e',
  'brand-4': '#c6c89f',
  'brand-5': '#e7dbb1',
}

RGB Array

[99, 143, 106], [132, 162, 123], [165, 181, 142], [198, 200, 159], [231, 219, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #638F6A, #84A27B, #A5B58E, #C6C89F, #E7DBB1 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #638f6a; --color-2: #84a27b; --color-3: #a5b58e; --color-4: #c6c89f; --color-5: #e7dbb1. 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. 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. Restrained colors convey professionalism and trust. 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