← Back to Editor

#A7E5F0 · #96C4B9 · #8C8C46 · #ACB037 · #F2CF71

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

#A7E5F0

Sky Blue · LightBlue · Glacier Blue

HEX
#A7E5F0
RGB
rgb(167, 229, 240)
HSL
hsl(189, 71%, 80%)
HSB
hsb(189, 30%, 94%)
CMYK
cmyk(30%, 5%, 0%, 6%)
Oklch
oklch(88.4% 0.064 209.7)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#96C4B9

Jade · DarkGray · Lake Green

HEX
#96C4B9
RGB
rgb(150, 196, 185)
HSL
hsl(166, 28%, 68%)
HSB
hsb(166, 23%, 77%)
CMYK
cmyk(23%, 0%, 6%, 23%)
Oklch
oklch(78.4% 0.051 178.6)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#8C8C46

Autumn Sage · Gray · Honey Gold

HEX
#8C8C46
RGB
rgb(140, 140, 70)
HSL
hsl(60, 33%, 41%)
HSB
hsb(60, 50%, 55%)
CMYK
cmyk(0%, 0%, 50%, 45%)
Oklch
oklch(62.4% 0.093 108.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#ACB037

Autumn Sage · GoldenRod · Honey Gold

HEX
#ACB037
RGB
rgb(172, 176, 55)
HSL
hsl(62, 52%, 45%)
HSB
hsb(62, 69%, 69%)
CMYK
cmyk(2%, 0%, 69%, 31%)
Oklch
oklch(73.2% 0.140 111.3)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#F2CF71

Ginger · Khaki · Sunflower

HEX
#F2CF71
RGB
rgb(242, 207, 113)
HSL
hsl(44, 83%, 70%)
HSB
hsb(44, 53%, 95%)
CMYK
cmyk(0%, 14%, 53%, 5%)
Oklch
oklch(86.5% 0.120 89.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7E5F0
F0B3A8

Analogous

A8F0D7
A7E5F0
A8C1F0

Triadic

A7E5F0
F0A8E5
E5F0A8

Split-Comp.

A7E5F0
F0A8C1
F0D7A8

Tetradic

A7E5F0
D7A8F0
F0B3A8
C1F0A8

Contrast Matrix WCAG 2.1 Contrast

A7E5F0
96C4B9
8C8C46
ACB037
F2CF71
—
1.4
Fail
2.5
Fail
1.7
Fail
1.1
Fail
1.4
Fail
—
1.8
Fail
1.2
Fail
1.3
Fail
2.5
Fail
1.8
Fail
—
1.5
Fail
2.3
Fail
1.7
Fail
1.2
Fail
1.5
Fail
—
1.5
Fail
1.1
Fail
1.3
Fail
2.3
Fail
1.5
Fail
—
White BG
1.4Fail
1.9Fail
3.5AA Large
2.3Fail
1.5Fail
Black BG
15.1AAA
10.9AAA
6.0AA
9.0AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C2ED
AAAABC
8C8C57
AEAE54
E3E388

Deuteranopia

BEBAED
A7A4BC
8C8C5B
AEAD5B
E5E78D

Tritanopia

AAEBEB
98BEBE
8C6467
AC6B70
F09A9E

Achromatopsia

D4D4D4
B5B5B5
848484
A1A1A1
CFCFCF

Shades & Tints Shades & Tints

#A7E5F0

Dark
Light

#96C4B9

Dark
Light

#8C8C46

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7e5f0;
  --color-2: #96c4b9;
  --color-3: #8c8c46;
  --color-4: #acb037;
  --color-5: #f2cf71;
}

SCSS

$color-1: #a7e5f0;
$color-2: #96c4b9;
$color-3: #8c8c46;
$color-4: #acb037;
$color-5: #f2cf71;

TAILWIND

colors: {
  'brand-1': '#a7e5f0',
  'brand-2': '#96c4b9',
  'brand-3': '#8c8c46',
  'brand-4': '#acb037',
  'brand-5': '#f2cf71',
}

RGB Array

[167, 229, 240], [150, 196, 185], [140, 140, 70], [172, 176, 55], [242, 207, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A7E5F0, #96C4B9, #8C8C46, #ACB037, #F2CF71 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: #a7e5f0; --color-2: #96c4b9; --color-3: #8c8c46; --color-4: #acb037; --color-5: #f2cf71. 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