#FB2C17 + #5B1D0C + #696840 + #6E8970 + #1E9AC7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FB2C17

Vermilion · OrangeRed · Passion Red

HEX

#FB2C17

RGB

rgb(251, 44, 23)

HSL

hsl(6, 97%, 54%)

HSB

hsb(6, 91%, 98%)

CMYK

cmyk(0%, 82%, 91%, 2%)

Oklch

oklch(63.6% 0.240 30.3)

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

#5B1D0C

Vermilion · Maroon · Deep Berry

HEX

#5B1D0C

RGB

rgb(91, 29, 12)

HSL

hsl(13, 77%, 20%)

HSB

hsb(13, 87%, 36%)

CMYK

cmyk(0%, 68%, 87%, 64%)

Oklch

oklch(32.6% 0.095 35.9)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#696840

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#696840

RGB

rgb(105, 104, 64)

HSL

hsl(59, 24%, 33%)

HSB

hsb(59, 39%, 41%)

CMYK

cmyk(0%, 1%, 39%, 59%)

Oklch

oklch(50.8% 0.058 107.1)

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

#6E8970

Celadon · Gray · Olive Green

HEX

#6E8970

RGB

rgb(110, 137, 112)

HSL

hsl(124, 11%, 48%)

HSB

hsb(124, 20%, 54%)

CMYK

cmyk(20%, 0%, 18%, 46%)

Oklch

oklch(60.2% 0.049 146.9)

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

#1E9AC7

Lake Blue · LightSeaGreen · Mint Ice

HEX

#1E9AC7

RGB

rgb(30, 154, 199)

HSL

hsl(196, 74%, 45%)

HSB

hsb(196, 85%, 78%)

CMYK

cmyk(85%, 23%, 0%, 22%)

Oklch

oklch(64.3% 0.120 229.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FB2C17

18E5FB

Analogous

FB1873

FB2C17

FBA018

Triadic

FB2C17

18FB2F

2F18FB

Split-Comp.

FB2C17

18FBA0

1873FB

Tetradic

FB2C17

73FB18

18E5FB

A018FB

Contrast Matrix WCAG 2.1 Contrast

FB2C17	5B1D0C	696840	6E8970	1E9AC7
—	3.4 AA Large	1.5 Fail	1.0 Fail	1.2 Fail
3.4 AA Large	—	2.2 Fail	3.4 AA Large	4.0 AA Large
1.5 Fail	2.2 Fail	—	1.5 Fail	1.8 Fail
1.0 Fail	3.4 AA Large	1.5 Fail	—	1.2 Fail
1.2 Fail	4.0 AA Large	1.8 Fail	1.2 Fail	—

White BG

3.8AA Large

12.9AAA

5.7AA

3.8AA Large

3.2AA Large

Black BG

5.5AA

1.6Fail

3.7AA Large

5.5AA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A01C

404010

69694A

7A7A76

5455BC

Deuteranopia

ADBD1D

444811

69694C

787678

4D43B9

Tritanopia

F12021

581314

695153

6F7B7C

24B4B2

Achromatopsia

676767

2E2E2E

646464

7E7E7E

7A7A7A

Shades & Tints Shades & Tints

#FB2C17

Dark

Light

#5B1D0C

Dark

Light

#696840

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fb2c17;
  --color-2: #5b1d0c;
  --color-3: #696840;
  --color-4: #6e8970;
  --color-5: #1e9ac7;
}

SCSS

$color-1: #fb2c17;
$color-2: #5b1d0c;
$color-3: #696840;
$color-4: #6e8970;
$color-5: #1e9ac7;

TAILWIND

colors: {
  'brand-1': '#fb2c17',
  'brand-2': '#5b1d0c',
  'brand-3': '#696840',
  'brand-4': '#6e8970',
  'brand-5': '#1e9ac7',
}

RGB Array

[251, 44, 23], [91, 29, 12], [105, 104, 64], [110, 137, 112], [30, 154, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FB2C17, #5B1D0C, #696840, #6E8970, #1E9AC7 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: #fb2c17; --color-2: #5b1d0c; --color-3: #696840; --color-4: #6e8970; --color-5: #1e9ac7. 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 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