#702302 + #B83C12 + #B0AC8B + #7BB893 + #37AB88 · 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

#702302

Tangerine · Maroon · Cinnamon

HEX

#702302

RGB

rgb(112, 35, 2)

HSL

hsl(18, 96%, 22%)

HSB

hsb(18, 98%, 44%)

CMYK

cmyk(0%, 69%, 98%, 56%)

Oklch

oklch(37.2% 0.116 39.6)

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

#B83C12

Tangerine · FireBrick · Amber Brown

HEX

#B83C12

RGB

rgb(184, 60, 18)

HSL

hsl(15, 82%, 40%)

HSB

hsb(15, 90%, 72%)

CMYK

cmyk(0%, 67%, 90%, 28%)

Oklch

oklch(53.1% 0.167 37.0)

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

#B0AC8B

Fresh Green · DarkGray · Sunflower

HEX

#B0AC8B

RGB

rgb(176, 172, 139)

HSL

hsl(54, 19%, 62%)

HSB

hsb(54, 21%, 69%)

CMYK

cmyk(0%, 2%, 21%, 31%)

Oklch

oklch(73.9% 0.046 101.7)

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

#7BB893

Celadon · DarkSeaGreen · Olive Green

HEX

#7BB893

RGB

rgb(123, 184, 147)

HSL

hsl(144, 30%, 60%)

HSB

hsb(144, 33%, 72%)

CMYK

cmyk(33%, 0%, 20%, 28%)

Oklch

oklch(73.1% 0.083 157.0)

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

#37AB88

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#37AB88

RGB

rgb(55, 171, 136)

HSL

hsl(162, 51%, 44%)

HSB

hsb(162, 68%, 67%)

CMYK

cmyk(68%, 0%, 20%, 33%)

Oklch

oklch(66.7% 0.116 168.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

702302

024E6E

Analogous

6E0218

702302

6E5802

Triadic

702302

026E23

23026E

Split-Comp.

702302

026E58

02186E

Tetradic

702302

186E02

024E6E

58026E

Contrast Matrix WCAG 2.1 Contrast

702302	B83C12	B0AC8B	7BB893	37AB88
—	1.9 Fail	4.7 AA	4.7 AA	3.8 AA Large
1.9 Fail	—	2.5 Fail	2.5 Fail	2.0 Fail
4.7 AA	2.5 Fail	—	1.0 Fail	1.2 Fail
4.7 AA	2.5 Fail	1.0 Fail	—	1.2 Fail
3.8 AA Large	2.0 Fail	1.2 Fail	1.2 Fail	—

White BG

10.9AAA

5.7AA

2.3Fail

2.9Fail

Black BG

1.9Fail

3.7AA Large

9.1AAA

7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4E0A

82811C

AEAE93

95969C

696A90

Deuteranopia

53590C

8A931F

AFAF95

928D9E

635A93

Tritanopia

6C1012

B22426

B0999B

7EA3A5

3D9799

Achromatopsia

363636

5C5C5C

A9A9A9

A2A2A2

848484

Shades & Tints Shades & Tints

#702302

Dark

Light

#B83C12

Dark

Light

#B0AC8B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #702302;
  --color-2: #b83c12;
  --color-3: #b0ac8b;
  --color-4: #7bb893;
  --color-5: #37ab88;
}

SCSS

$color-1: #702302;
$color-2: #b83c12;
$color-3: #b0ac8b;
$color-4: #7bb893;
$color-5: #37ab88;

TAILWIND

colors: {
  'brand-1': '#702302',
  'brand-2': '#b83c12',
  'brand-3': '#b0ac8b',
  'brand-4': '#7bb893',
  'brand-5': '#37ab88',
}

RGB Array

[112, 35, 2], [184, 60, 18], [176, 172, 139], [123, 184, 147], [55, 171, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #702302, #B83C12, #B0AC8B, #7BB893, #37AB88 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: #702302; --color-2: #b83c12; --color-3: #b0ac8b; --color-4: #7bb893; --color-5: #37ab88. 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