← Back to Editor

#FA503F · #D13B3A · #5D242D · #69514F · #9D997E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FA503F

Peach Pink · Tomato · Coral Red

HEX
#FA503F
RGB
rgb(250, 80, 63)
HSL
hsl(5, 95%, 61%)
HSB
hsb(5, 75%, 98%)
CMYK
cmyk(0%, 68%, 75%, 2%)
Oklch
oklch(66.6% 0.209 29.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D13B3A

Vermilion · Crimson · Passion Red

HEX
#D13B3A
RGB
rgb(209, 59, 58)
HSL
hsl(0, 62%, 52%)
HSB
hsb(0, 72%, 82%)
CMYK
cmyk(0%, 72%, 72%, 18%)
Oklch
oklch(57.6% 0.187 25.6)

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

#5D242D

Crimson · Maroon · Wine Red

HEX
#5D242D
RGB
rgb(93, 36, 45)
HSL
hsl(351, 44%, 25%)
HSB
hsb(351, 61%, 36%)
CMYK
cmyk(0%, 61%, 52%, 64%)
Oklch
oklch(34.6% 0.084 12.9)

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

#69514F

Crimson · DimGray · Wine Red

HEX
#69514F
RGB
rgb(105, 81, 79)
HSL
hsl(5, 14%, 36%)
HSB
hsb(5, 25%, 41%)
CMYK
cmyk(0%, 23%, 25%, 59%)
Oklch
oklch(45.9% 0.033 23.9)

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

#9D997E

Autumn Sage · Gray · Sunflower

HEX
#9D997E
RGB
rgb(157, 153, 126)
HSL
hsl(52, 14%, 55%)
HSB
hsb(52, 20%, 62%)
CMYK
cmyk(0%, 3%, 20%, 38%)
Oklch
oklch(67.9% 0.038 100.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FA503F
3DEAFA

Analogous

FA3D8C
FA503F
FAAB3D

Triadic

FA503F
3DFA4D
4D3DFA

Split-Comp.

FA503F
3DFAAB
3D8CFA

Tetradic

FA503F
8CFA3D
3DEAFA
AB3DFA

Contrast Matrix WCAG 2.1 Contrast

FA503F
D13B3A
5D242D
69514F
9D997E
—
1.4
Fail
3.6
AA Large
2.2
Fail
1.2
Fail
1.4
Fail
—
2.5
Fail
1.5
Fail
1.7
Fail
3.6
AA Large
2.5
Fail
—
1.6
Fail
4.2
AA Large
2.2
Fail
1.5
Fail
1.6
Fail
—
2.5
Fail
1.2
Fail
1.7
Fail
4.2
AA Large
2.5
Fail
—
White BG
3.3AA Large
4.8AA
12.0AAA
7.3AAA
2.9Fail
Black BG
6.3AA
4.4AA Large
1.8Fail
2.9Fail
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0AF43
908F3A
44442B
5F5E4F
9B9B85

Deuteranopia

BAC744
99A43A
484C2A
606250
9C9C86

Tritanopia

F24647
C93A3A
5A2929
685050
9D8A8B

Achromatopsia

818181
686868
363636
585858
979797

Shades & Tints Shades & Tints

#FA503F

Dark
Light

#D13B3A

Dark
Light

#5D242D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fa503f;
  --color-2: #d13b3a;
  --color-3: #5d242d;
  --color-4: #69514f;
  --color-5: #9d997e;
}

SCSS

$color-1: #fa503f;
$color-2: #d13b3a;
$color-3: #5d242d;
$color-4: #69514f;
$color-5: #9d997e;

TAILWIND

colors: {
  'brand-1': '#fa503f',
  'brand-2': '#d13b3a',
  'brand-3': '#5d242d',
  'brand-4': '#69514f',
  'brand-5': '#9d997e',
}

RGB Array

[250, 80, 63], [209, 59, 58], [93, 36, 45], [105, 81, 79], [157, 153, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FA503F, #D13B3A, #5D242D, #69514F, #9D997E 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: #fa503f; --color-2: #d13b3a; --color-3: #5d242d; --color-4: #69514f; --color-5: #9d997e. 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