← Back to Editor

#ADC786 · #71B687 · #A23315 · #443123 · #3B2A1A

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 LibraryData Visualization

Color Details Color Details

#ADC786

Willow Green · DarkSeaGreen · Apple Green

HEX
#ADC786
RGB
rgb(173, 199, 134)
HSL
hsl(84, 37%, 65%)
HSB
hsb(84, 33%, 78%)
CMYK
cmyk(13%, 0%, 33%, 22%)
Oklch
oklch(79.4% 0.092 126.1)

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

#71B687

Celadon · DarkSeaGreen · Olive Green

HEX
#71B687
RGB
rgb(113, 182, 135)
HSL
hsl(139, 32%, 58%)
HSB
hsb(139, 38%, 71%)
CMYK
cmyk(38%, 0%, 26%, 29%)
Oklch
oklch(71.7% 0.098 153.5)

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

#A23315

Vermilion · Brown · Wine Red

HEX
#A23315
RGB
rgb(162, 51, 21)
HSL
hsl(13, 77%, 36%)
HSB
hsb(13, 87%, 64%)
CMYK
cmyk(0%, 69%, 87%, 36%)
Oklch
oklch(48.3% 0.152 35.3)

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

#443123

Tangerine · DarkSlateGray · Cinnamon

HEX
#443123
RGB
rgb(68, 49, 35)
HSL
hsl(25, 32%, 20%)
HSB
hsb(25, 49%, 27%)
CMYK
cmyk(0%, 28%, 49%, 73%)
Oklch
oklch(33.1% 0.036 57.5)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#3B2A1A

Tangerine · DarkSlateGray · Cinnamon

HEX
#3B2A1A
RGB
rgb(59, 42, 26)
HSL
hsl(29, 39%, 17%)
HSB
hsb(29, 56%, 23%)
CMYK
cmyk(0%, 29%, 56%, 77%)
Oklch
oklch(30.1% 0.037 64.0)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ADC786
9F85C7

Analogous

C7C085
ADC786
8BC785

Triadic

ADC786
85ACC7
C785AC

Split-Comp.

ADC786
858BC7
C085C7

Tetradic

ADC786
85C7C0
9F85C7
C7858B

Contrast Matrix WCAG 2.1 Contrast

ADC786
71B687
A23315
443123
3B2A1A
—
1.3
Fail
3.7
AA Large
6.6
AA
7.4
AAA
1.3
Fail
—
2.9
Fail
5.1
AA
5.7
AA
3.7
AA Large
2.9
Fail
—
1.8
Fail
2.0
Fail
6.6
AA
5.1
AA
1.8
Fail
—
1.1
Fail
7.4
AAA
5.7
AA
2.0
Fail
1.1
Fail
—
White BG
1.9Fail
2.4Fail
7.0AA
12.3AAA
13.7AAA
Black BG
11.3AAA
8.7AAA
3.0AA Large
1.7Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B896
8F8F92
72711C
3C3C26
34331E

Deuteranopia

B7B59A
8B8695
78811E
3D3E27
35361F

Tritanopia

AEA2A5
749B9D
9C2223
43292A
3A2122

Achromatopsia

B8B8B8
9C9C9C
515151
353535
2D2D2D

Shades & Tints Shades & Tints

#ADC786

Dark
Light

#71B687

Dark
Light

#A23315

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #adc786;
  --color-2: #71b687;
  --color-3: #a23315;
  --color-4: #443123;
  --color-5: #3b2a1a;
}

SCSS

$color-1: #adc786;
$color-2: #71b687;
$color-3: #a23315;
$color-4: #443123;
$color-5: #3b2a1a;

TAILWIND

colors: {
  'brand-1': '#adc786',
  'brand-2': '#71b687',
  'brand-3': '#a23315',
  'brand-4': '#443123',
  'brand-5': '#3b2a1a',
}

RGB Array

[173, 199, 134], [113, 182, 135], [162, 51, 21], [68, 49, 35], [59, 42, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ADC786, #71B687, #A23315, #443123, #3B2A1A is ideal for: tech websites, dark mode UIs, game UIs, 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: #adc786; --color-2: #71b687; --color-3: #a23315; --color-4: #443123; --color-5: #3b2a1a. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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