#89C1DB + #8FA385 + #AB7A4A + #BA5226 + #991716 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#89C1DB

Sky Blue · SkyBlue · Lake Green

HEX

#89C1DB

RGB

rgb(137, 193, 219)

HSL

hsl(199, 53%, 70%)

HSB

hsb(199, 37%, 86%)

CMYK

cmyk(37%, 12%, 0%, 14%)

Oklch

oklch(78.1% 0.069 228.5)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#8FA385

Celadon · DarkSeaGreen · Olive Green

HEX

#8FA385

RGB

rgb(143, 163, 133)

HSL

hsl(100, 14%, 58%)

HSB

hsb(100, 18%, 64%)

CMYK

cmyk(12%, 0%, 18%, 36%)

Oklch

oklch(69.1% 0.048 135.2)

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

#AB7A4A

Ochre · Sienna · Amber Brown

HEX

#AB7A4A

RGB

rgb(171, 122, 74)

HSL

hsl(30, 40%, 48%)

HSB

hsb(30, 57%, 67%)

CMYK

cmyk(0%, 29%, 57%, 33%)

Oklch

oklch(61.8% 0.089 64.3)

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

#BA5226

Tangerine · Sienna · Amber Brown

HEX

#BA5226

RGB

rgb(186, 82, 38)

HSL

hsl(18, 66%, 44%)

HSB

hsb(18, 80%, 73%)

CMYK

cmyk(0%, 56%, 80%, 27%)

Oklch

oklch(56.5% 0.146 41.6)

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

#991716

Vermilion · FireBrick · Wine Red

HEX

#991716

RGB

rgb(153, 23, 22)

HSL

hsl(0, 75%, 34%)

HSB

hsb(0, 86%, 60%)

CMYK

cmyk(0%, 85%, 86%, 40%)

Oklch

oklch(44.0% 0.164 27.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

89C1DB

DBA48A

Analogous

8ADBCC

89C1DB

8A99DB

Triadic

89C1DB

DB8AC1

C1DB8A

Split-Comp.

89C1DB

DB8A99

DBCC8A

Tetradic

89C1DB

CC8ADB

DBA48A

99DB8A

Contrast Matrix WCAG 2.1 Contrast

89C1DB	8FA385	AB7A4A	BA5226	991716
—	1.4 Fail	1.9 Fail	2.5 Fail	4.3 AA Large
1.4 Fail	—	1.4 Fail	1.8 Fail	3.1 AA Large
1.9 Fail	1.4 Fail	—	1.3 Fail	2.3 Fail
2.5 Fail	1.8 Fail	1.3 Fail	—	1.7 Fail
4.3 AA Large	3.1 AA Large	2.3 Fail	1.7 Fail	—

White BG

2.0Fail

2.7Fail

3.7AA Large

4.9AA

8.4AAA

Black BG

10.7AAA

7.7AAA

5.6AA

4.3AA Large

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A2D5

98988C

969556

8D8C31

616016

Deuteranopia

9E9AD3

97958E

999C58

939B33

687216

Tritanopia

8CD0CF

909293

A95F61

B5393B

931616

Achromatopsia

B3B3B3

9A9A9A

838383

6C6C6C

3E3E3E

Shades & Tints Shades & Tints

#89C1DB

Dark

Light

#8FA385

Dark

Light

#AB7A4A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #89c1db;
  --color-2: #8fa385;
  --color-3: #ab7a4a;
  --color-4: #ba5226;
  --color-5: #991716;
}

SCSS

$color-1: #89c1db;
$color-2: #8fa385;
$color-3: #ab7a4a;
$color-4: #ba5226;
$color-5: #991716;

TAILWIND

colors: {
  'brand-1': '#89c1db',
  'brand-2': '#8fa385',
  'brand-3': '#ab7a4a',
  'brand-4': '#ba5226',
  'brand-5': '#991716',
}

RGB Array

[137, 193, 219], [143, 163, 133], [171, 122, 74], [186, 82, 38], [153, 23, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #89C1DB, #8FA385, #AB7A4A, #BA5226, #991716 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: #89c1db; --color-2: #8fa385; --color-3: #ab7a4a; --color-4: #ba5226; --color-5: #991716. 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 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