← Back to Editor

#A8D690 · #B0CB73 · #BFBC6B · #CAA869 · #69847C

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 Library

Color Details Color Details

#A8D690

Celadon · LightGreen · Apple Green

HEX
#A8D690
RGB
rgb(168, 214, 144)
HSL
hsl(99, 46%, 70%)
HSB
hsb(99, 33%, 84%)
CMYK
cmyk(21%, 0%, 33%, 16%)
Oklch
oklch(82.6% 0.106 135.3)

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

#B0CB73

Willow Green · DarkSeaGreen · Apple Green

HEX
#B0CB73
RGB
rgb(176, 203, 115)
HSL
hsl(78, 46%, 62%)
HSB
hsb(78, 43%, 80%)
CMYK
cmyk(13%, 0%, 43%, 20%)
Oklch
oklch(80.2% 0.118 123.0)

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

#BFBC6B

Autumn Sage · Tan · Sunflower

HEX
#BFBC6B
RGB
rgb(191, 188, 107)
HSL
hsl(58, 40%, 58%)
HSB
hsb(58, 44%, 75%)
CMYK
cmyk(0%, 2%, 44%, 25%)
Oklch
oklch(78.0% 0.104 106.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CAA869

Ginger · Tan · Warm Sun

HEX
#CAA869
RGB
rgb(202, 168, 105)
HSL
hsl(39, 48%, 60%)
HSB
hsb(39, 48%, 79%)
CMYK
cmyk(0%, 17%, 48%, 21%)
Oklch
oklch(74.8% 0.090 82.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#69847C

Mineral Blue · SlateGray · Mint Ice

HEX
#69847C
RGB
rgb(105, 132, 124)
HSL
hsl(162, 11%, 46%)
HSB
hsb(162, 20%, 52%)
CMYK
cmyk(20%, 0%, 6%, 48%)
Oklch
oklch(59.0% 0.033 175.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A8D690
BD8FD6

Analogous

CBD68F
A8D690
8FD69A

Triadic

A8D690
8FA8D6
D68FA8

Split-Comp.

A8D690
9A8FD6
D68FCB

Tetradic

A8D690
8FCBD6
BD8FD6
D69A8F

Contrast Matrix WCAG 2.1 Contrast

A8D690
B0CB73
BFBC6B
CAA869
69847C
—
1.1
Fail
1.2
Fail
1.4
Fail
2.4
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
2.2
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
2.0
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
1.8
Fail
2.4
Fail
2.2
Fail
2.0
Fail
1.8
Fail
—
White BG
1.7Fail
1.8Fail
2.0Fail
2.3Fail
4.0AA Large
Black BG
12.7AAA
11.6AAA
10.6AAA
9.3AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBCA1
BCBC88
BEBE7F
BBBB78
75757E

Deuteranopia

B9B6A5
BAB88D
BEBE83
BDC07C
73717E

Tritanopia

AAAEB1
B1999D
BF8E91
C88487
6A7F80

Achromatopsia

C0C0C0
B9B9B9
B4B4B4
ABABAB
7B7B7B

Shades & Tints Shades & Tints

#A8D690

Dark
Light

#B0CB73

Dark
Light

#BFBC6B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a8d690;
  --color-2: #b0cb73;
  --color-3: #bfbc6b;
  --color-4: #caa869;
  --color-5: #69847c;
}

SCSS

$color-1: #a8d690;
$color-2: #b0cb73;
$color-3: #bfbc6b;
$color-4: #caa869;
$color-5: #69847c;

TAILWIND

colors: {
  'brand-1': '#a8d690',
  'brand-2': '#b0cb73',
  'brand-3': '#bfbc6b',
  'brand-4': '#caa869',
  'brand-5': '#69847c',
}

RGB Array

[168, 214, 144], [176, 203, 115], [191, 188, 107], [202, 168, 105], [105, 132, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A8D690, #B0CB73, #BFBC6B, #CAA869, #69847C is ideal for: corporate websites, product showcases, portfolios. 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: #a8d690; --color-2: #b0cb73; --color-3: #bfbc6b; --color-4: #caa869; --color-5: #69847c. 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. 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