← Back to Editor

#9BC9B8 · #CED19D · #4D3C2F · #997040 · #B35130

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

#9BC9B8

Jade · DarkGray · Apple Green

HEX
#9BC9B8
RGB
rgb(155, 201, 184)
HSL
hsl(158, 30%, 70%)
HSB
hsb(158, 23%, 79%)
CMYK
cmyk(23%, 0%, 8%, 21%)
Oklch
oklch(79.8% 0.054 170.3)

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

#CED19D

Fresh Green · Tan · Sunflower

HEX
#CED19D
RGB
rgb(206, 209, 157)
HSL
hsl(63, 36%, 72%)
HSB
hsb(63, 25%, 82%)
CMYK
cmyk(1%, 0%, 25%, 18%)
Oklch
oklch(84.5% 0.069 110.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#4D3C2F

Tangerine · DarkOliveGreen · Cinnamon

HEX
#4D3C2F
RGB
rgb(77, 60, 47)
HSL
hsl(26, 24%, 24%)
HSB
hsb(26, 39%, 30%)
CMYK
cmyk(0%, 22%, 39%, 70%)
Oklch
oklch(37.1% 0.032 59.0)

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

#997040

Ochre · Sienna · Amber Brown

HEX
#997040
RGB
rgb(153, 112, 64)
HSL
hsl(32, 41%, 43%)
HSB
hsb(32, 58%, 60%)
CMYK
cmyk(0%, 27%, 58%, 40%)
Oklch
oklch(57.6% 0.083 69.3)

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

#B35130

Tangerine · Sienna · Amber Brown

HEX
#B35130
RGB
rgb(179, 81, 48)
HSL
hsl(15, 58%, 45%)
HSB
hsb(15, 73%, 70%)
CMYK
cmyk(0%, 55%, 73%, 30%)
Oklch
oklch(55.3% 0.136 38.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BC9B8
C99CAC

Analogous

9CC9A2
9BC9B8
9CC3C9

Triadic

9BC9B8
B99CC9
C9B99C

Split-Comp.

9BC9B8
C99CC3
C9A29C

Tetradic

9BC9B8
A29CC9
C99CAC
C3C99C

Contrast Matrix WCAG 2.1 Contrast

9BC9B8
CED19D
4D3C2F
997040
B35130
—
1.2
Fail
5.7
AA
2.4
Fail
2.8
Fail
1.2
Fail
—
6.6
AA
2.8
Fail
3.2
AA Large
5.7
AA
6.6
AA
—
2.4
Fail
2.1
Fail
2.4
Fail
2.8
Fail
2.4
Fail
—
1.1
Fail
2.8
Fail
3.2
AA Large
2.1
Fail
1.1
Fail
—
White BG
1.8Fail
1.6Fail
10.5AAA
4.4AA Large
5.1AA
Black BG
11.4AAA
13.2AAA
2.0Fail
4.7AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAFBC
CFCFAA
464532
87874C
898838

Deuteranopia

ACA9BD
CFCFAD
474833
8A8D4E
8E963A

Tritanopia

9DBFC0
CEB4B6
4C3535
975557
AE3E40

Achromatopsia

B9B9B9
CACACA
404040
777777
6B6B6B

Shades & Tints Shades & Tints

#9BC9B8

Dark
Light

#CED19D

Dark
Light

#4D3C2F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9bc9b8;
  --color-2: #ced19d;
  --color-3: #4d3c2f;
  --color-4: #997040;
  --color-5: #b35130;
}

SCSS

$color-1: #9bc9b8;
$color-2: #ced19d;
$color-3: #4d3c2f;
$color-4: #997040;
$color-5: #b35130;

TAILWIND

colors: {
  'brand-1': '#9bc9b8',
  'brand-2': '#ced19d',
  'brand-3': '#4d3c2f',
  'brand-4': '#997040',
  'brand-5': '#b35130',
}

RGB Array

[155, 201, 184], [206, 209, 157], [77, 60, 47], [153, 112, 64], [179, 81, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #9BC9B8, #CED19D, #4D3C2F, #997040, #B35130 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: #9bc9b8; --color-2: #ced19d; --color-3: #4d3c2f; --color-4: #997040; --color-5: #b35130. 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