← Back to Editor

#A5CC7A · #ABA957 · #997746 · #914E3C · #703442

cool

A 5-color cool 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

#A5CC7A

Willow Green · DarkSeaGreen · Apple Green

HEX
#A5CC7A
RGB
rgb(165, 204, 122)
HSL
hsl(89, 45%, 64%)
HSB
hsb(89, 40%, 80%)
CMYK
cmyk(19%, 0%, 40%, 20%)
Oklch
oklch(79.8% 0.117 129.5)

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

#ABA957

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ABA957
RGB
rgb(171, 169, 87)
HSL
hsl(59, 33%, 51%)
HSB
hsb(59, 49%, 67%)
CMYK
cmyk(0%, 1%, 49%, 33%)
Oklch
oklch(71.9% 0.105 107.5)

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

#997746

Ochre · Sienna · Amber Brown

HEX
#997746
RGB
rgb(153, 119, 70)
HSL
hsl(35, 37%, 44%)
HSB
hsb(35, 54%, 60%)
CMYK
cmyk(0%, 22%, 54%, 40%)
Oklch
oklch(59.1% 0.079 75.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#914E3C

Crimson · Sienna · Wine Red

HEX
#914E3C
RGB
rgb(145, 78, 60)
HSL
hsl(13, 41%, 40%)
HSB
hsb(13, 59%, 57%)
CMYK
cmyk(0%, 46%, 59%, 43%)
Oklch
oklch(50.0% 0.095 36.0)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#703442

Crimson · Brown · Wine Red

HEX
#703442
RGB
rgb(112, 52, 66)
HSL
hsl(346, 37%, 32%)
HSB
hsb(346, 54%, 44%)
CMYK
cmyk(0%, 54%, 41%, 56%)
Oklch
oklch(40.9% 0.086 6.9)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A5CC7A
A27ACD

Analogous

CDCB7A
A5CC7A
7BCD7A

Triadic

A5CC7A
7AA5CD
CD7AA5

Split-Comp.

A5CC7A
7A7BCD
CB7ACD

Tetradic

A5CC7A
7ACDCB
A27ACD
CD7A7B

Contrast Matrix WCAG 2.1 Contrast

A5CC7A
ABA957
997746
914E3C
703442
—
1.3
Fail
2.3
Fail
3.4
AA Large
5.1
AA
1.3
Fail
—
1.7
Fail
2.5
Fail
3.8
AA Large
2.3
Fail
1.7
Fail
—
1.5
Fail
2.2
Fail
3.4
AA Large
2.5
Fail
1.5
Fail
—
1.5
Fail
5.1
AA
3.8
AA Large
2.2
Fail
1.5
Fail
—
White BG
1.8Fail
2.5Fail
4.1AA Large
6.3AA
9.3AAA
Black BG
11.5AAA
8.5AAA
5.1AA
3.4AA Large
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B68E
AAAA6B
8A8A52
747340
56553F

Deuteranopia

B4B193
AAAA70
8C8F55
787D41
5A5E3E

Tritanopia

A79EA1
AB7B7E
975B5D
8E4445
6D3C3B

Achromatopsia

B7B7B7
A0A0A0
7C7C7C
606060
484848

Shades & Tints Shades & Tints

#A5CC7A

Dark
Light

#ABA957

Dark
Light

#997746

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a5cc7a;
  --color-2: #aba957;
  --color-3: #997746;
  --color-4: #914e3c;
  --color-5: #703442;
}

SCSS

$color-1: #a5cc7a;
$color-2: #aba957;
$color-3: #997746;
$color-4: #914e3c;
$color-5: #703442;

TAILWIND

colors: {
  'brand-1': '#a5cc7a',
  'brand-2': '#aba957',
  'brand-3': '#997746',
  'brand-4': '#914e3c',
  'brand-5': '#703442',
}

RGB Array

[165, 204, 122], [171, 169, 87], [153, 119, 70], [145, 78, 60], [112, 52, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #A5CC7A, #ABA957, #997746, #914E3C, #703442 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: #a5cc7a; --color-2: #aba957; --color-3: #997746; --color-4: #914e3c; --color-5: #703442. 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 cool-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