← Back to Editor

#7ABDA4 · #426B65 · #F7A409 · #171E1A · #FA3C24

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#7ABDA4

Jade · MediumAquaMarine · Apple Green

HEX
#7ABDA4
RGB
rgb(122, 189, 164)
HSL
hsl(158, 34%, 61%)
HSB
hsb(158, 35%, 74%)
CMYK
cmyk(35%, 0%, 13%, 26%)
Oklch
oklch(74.6% 0.078 168.7)

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

#426B65

Mineral Blue · DimGray · Mint Ice

HEX
#426B65
RGB
rgb(66, 107, 101)
HSL
hsl(171, 24%, 34%)
HSB
hsb(171, 38%, 42%)
CMYK
cmyk(38%, 0%, 6%, 58%)
Oklch
oklch(49.6% 0.047 184.2)

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

#F7A409

Ochre · Orange · Amber Brown

HEX
#F7A409
RGB
rgb(247, 164, 9)
HSL
hsl(39, 94%, 50%)
HSB
hsb(39, 96%, 97%)
CMYK
cmyk(0%, 34%, 96%, 3%)
Oklch
oklch(78.2% 0.165 72.7)

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

#171E1A

Celadon · Black · Dark Green

HEX
#171E1A
RGB
rgb(23, 30, 26)
HSL
hsl(146, 13%, 10%)
HSB
hsb(146, 23%, 12%)
CMYK
cmyk(23%, 0%, 13%, 88%)
Oklch
oklch(22.6% 0.013 160.1)

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

#FA3C24

Vermilion · OrangeRed · Passion Red

HEX
#FA3C24
RGB
rgb(250, 60, 36)
HSL
hsl(7, 96%, 56%)
HSB
hsb(7, 86%, 98%)
CMYK
cmyk(0%, 76%, 86%, 2%)
Oklch
oklch(64.5% 0.228 30.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7ABDA4
BD7A93

Analogous

7ABD83
7ABDA4
7AB4BD

Triadic

7ABDA4
A57ABD
BDA57A

Split-Comp.

7ABDA4
BD7AB4
BD837A

Tetradic

7ABDA4
837ABD
BD7A93
B4BD7A

Contrast Matrix WCAG 2.1 Contrast

7ABDA4
426B65
F7A409
171E1A
FA3C24
—
2.7
Fail
1.1
Fail
7.8
AAA
1.7
Fail
2.7
Fail
—
2.9
Fail
2.8
Fail
1.6
Fail
1.1
Fail
2.9
Fail
—
8.3
AAA
1.8
Fail
7.8
AAA
2.8
Fail
8.3
AAA
—
4.6
AA
1.7
Fail
1.6
Fail
1.8
Fail
4.6
AA
—
White BG
2.2Fail
6.0AA
2.0Fail
17.0AAA
3.7AA Large
Black BG
9.6AAA
3.5AA Large
10.3AAA
1.2Fail
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9798AA
545466
D3D22F
1A1A1B
A8A62A

Deuteranopia

938EAC
514E67
D8DE37
1A191B
B3C12B

Tritanopia

7DAFB0
446868
F34C53
171C1C
F12E2F

Achromatopsia

A6A6A6
5E5E5E
ABABAB
1B1B1B
727272

Shades & Tints Shades & Tints

#7ABDA4

Dark
Light

#426B65

Dark
Light

#F7A409

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7abda4;
  --color-2: #426b65;
  --color-3: #f7a409;
  --color-4: #171e1a;
  --color-5: #fa3c24;
}

SCSS

$color-1: #7abda4;
$color-2: #426b65;
$color-3: #f7a409;
$color-4: #171e1a;
$color-5: #fa3c24;

TAILWIND

colors: {
  'brand-1': '#7abda4',
  'brand-2': '#426b65',
  'brand-3': '#f7a409',
  'brand-4': '#171e1a',
  'brand-5': '#fa3c24',
}

RGB Array

[122, 189, 164], [66, 107, 101], [247, 164, 9], [23, 30, 26], [250, 60, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #7ABDA4, #426B65, #F7A409, #171E1A, #FA3C24 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: #7abda4; --color-2: #426b65; --color-3: #f7a409; --color-4: #171e1a; --color-5: #fa3c24. 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 warm-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