← Back to Editor

#A3D1A9 · #BFC421 · #F07537 · #E3244E · #423F40

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

#A3D1A9

Celadon · DarkSeaGreen · Apple Green

HEX
#A3D1A9
RGB
rgb(163, 209, 169)
HSL
hsl(128, 33%, 73%)
HSB
hsb(128, 22%, 82%)
CMYK
cmyk(22%, 0%, 19%, 18%)
Oklch
oklch(81.7% 0.074 148.4)

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

#BFC421

Autumn Sage · GoldenRod · Honey Gold

HEX
#BFC421
RGB
rgb(191, 196, 33)
HSL
hsl(62, 71%, 45%)
HSB
hsb(62, 83%, 77%)
CMYK
cmyk(3%, 0%, 83%, 23%)
Oklch
oklch(79.1% 0.167 111.6)

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

#F07537

Tangerine · Tomato · Warm Sun

HEX
#F07537
RGB
rgb(240, 117, 55)
HSL
hsl(20, 86%, 58%)
HSB
hsb(20, 77%, 94%)
CMYK
cmyk(0%, 51%, 77%, 6%)
Oklch
oklch(69.7% 0.169 44.8)

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

#E3244E

Vermilion · Crimson · Passion Red

HEX
#E3244E
RGB
rgb(227, 36, 78)
HSL
hsl(347, 77%, 52%)
HSB
hsb(347, 84%, 89%)
CMYK
cmyk(0%, 84%, 66%, 11%)
Oklch
oklch(59.4% 0.220 16.5)

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

#423F40

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#423F40
RGB
rgb(66, 63, 64)
HSL
hsl(340, 2%, 25%)
HSB
hsb(340, 5%, 26%)
CMYK
cmyk(0%, 5%, 3%, 74%)
Oklch
oklch(37.1% 0.004 354.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3D1A9
D1A3CB

Analogous

B4D1A3
A3D1A9
A3D1C0

Triadic

A3D1A9
A9A3D1
D1A9A3

Split-Comp.

A3D1A9
C0A3D1
D1A3B4

Tetradic

A3D1A9
A3B4D1
D1A3CB
D1C0A3

Contrast Matrix WCAG 2.1 Contrast

A3D1A9
BFC421
F07537
E3244E
423F40
—
1.1
Fail
1.7
Fail
2.6
Fail
6.1
AA
1.1
Fail
—
1.5
Fail
2.4
Fail
5.5
AA
1.7
Fail
1.5
Fail
—
1.6
Fail
3.6
AA Large
2.6
Fail
2.4
Fail
1.6
Fail
—
2.3
Fail
6.1
AA
5.5
AA
3.6
AA Large
2.3
Fail
—
White BG
1.7Fail
1.9Fail
2.9Fail
4.5AA
10.4AAA
Black BG
12.3AAA
11.1AAA
7.3AAA
4.6AA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B7B3
C1C148
BBBA46
908F44
414140

Deuteranopia

B4B1B5
C1C152
C2CB4A
9BAA41
414140

Tritanopia

A5BABC
BF686E
EA5254
D93C3A
424040

Achromatopsia

BFBFBF
B0B0B0
939393
626262
404040

Shades & Tints Shades & Tints

#A3D1A9

Dark
Light

#BFC421

Dark
Light

#F07537

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3d1a9;
  --color-2: #bfc421;
  --color-3: #f07537;
  --color-4: #e3244e;
  --color-5: #423f40;
}

SCSS

$color-1: #a3d1a9;
$color-2: #bfc421;
$color-3: #f07537;
$color-4: #e3244e;
$color-5: #423f40;

TAILWIND

colors: {
  'brand-1': '#a3d1a9',
  'brand-2': '#bfc421',
  'brand-3': '#f07537',
  'brand-4': '#e3244e',
  'brand-5': '#423f40',
}

RGB Array

[163, 209, 169], [191, 196, 33], [240, 117, 55], [227, 36, 78], [66, 63, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A3D1A9, #BFC421, #F07537, #E3244E, #423F40 is ideal for: 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: #a3d1a9; --color-2: #bfc421; --color-3: #f07537; --color-4: #e3244e; --color-5: #423f40. 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. 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