← Back to Editor

#FF8223 · #FAAF75 · #D4A683 · #B08B6F · #806552

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

#FF8223

Tangerine · Coral · Warm Sun

HEX
#FF8223
RGB
rgb(255, 130, 35)
HSL
hsl(26, 100%, 57%)
HSB
hsb(26, 86%, 100%)
CMYK
cmyk(0%, 49%, 86%, 0%)
Oklch
oklch(73.6% 0.180 51.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#FAAF75

Apricot · LightSalmon · Warm Sun

HEX
#FAAF75
RGB
rgb(250, 175, 117)
HSL
hsl(26, 93%, 72%)
HSB
hsb(26, 53%, 98%)
CMYK
cmyk(0%, 30%, 53%, 2%)
Oklch
oklch(81.3% 0.115 58.0)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#D4A683

Apricot · Tan · Warm Sun

HEX
#D4A683
RGB
rgb(212, 166, 131)
HSL
hsl(26, 49%, 67%)
HSB
hsb(26, 38%, 83%)
CMYK
cmyk(0%, 22%, 38%, 17%)
Oklch
oklch(75.9% 0.072 58.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#B08B6F

Tangerine · Gray · Warm Sun

HEX
#B08B6F
RGB
rgb(176, 139, 111)
HSL
hsl(26, 29%, 56%)
HSB
hsb(26, 37%, 69%)
CMYK
cmyk(0%, 21%, 37%, 31%)
Oklch
oklch(66.5% 0.060 58.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#806552

Tangerine · DimGray · Amber Brown

HEX
#806552
RGB
rgb(128, 101, 82)
HSL
hsl(25, 22%, 41%)
HSB
hsb(25, 36%, 50%)
CMYK
cmyk(0%, 21%, 36%, 50%)
Oklch
oklch(52.8% 0.045 56.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF8223
24A0FF

Analogous

FF2432
FF8223
FFF024

Triadic

FF8223
24FF83
8324FF

Split-Comp.

FF8223
24FFF0
2432FF

Tetradic

FF8223
32FF24
24A0FF
F024FF

Contrast Matrix WCAG 2.1 Contrast

FF8223
FAAF75
D4A683
B08B6F
806552
—
1.4
Fail
1.1
Fail
1.3
Fail
2.2
Fail
1.4
Fail
—
1.2
Fail
1.7
Fail
2.9
Fail
1.1
Fail
1.2
Fail
—
1.4
Fail
2.5
Fail
1.3
Fail
1.7
Fail
1.4
Fail
—
1.7
Fail
2.2
Fail
2.9
Fail
2.5
Fail
1.7
Fail
—
White BG
2.5Fail
1.8Fail
2.2Fail
3.1AA Large
5.4AA
Black BG
8.5AAA
11.5AAA
9.6AAA
6.8AA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C83A
DAD983
C0C08B
A0A076
747457

Deuteranopia

D0DA40
DEE486
C3C68E
A2A577
767858

Tritanopia

F94C50
F68E91
D29294
AE7B7C
7F5A5B

Achromatopsia

9D9D9D
BFBFBF
B0B0B0
939393
6B6B6B

Shades & Tints Shades & Tints

#FF8223

Dark
Light

#FAAF75

Dark
Light

#D4A683

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff8223;
  --color-2: #faaf75;
  --color-3: #d4a683;
  --color-4: #b08b6f;
  --color-5: #806552;
}

SCSS

$color-1: #ff8223;
$color-2: #faaf75;
$color-3: #d4a683;
$color-4: #b08b6f;
$color-5: #806552;

TAILWIND

colors: {
  'brand-1': '#ff8223',
  'brand-2': '#faaf75',
  'brand-3': '#d4a683',
  'brand-4': '#b08b6f',
  'brand-5': '#806552',
}

RGB Array

[255, 130, 35], [250, 175, 117], [212, 166, 131], [176, 139, 111], [128, 101, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF8223, #FAAF75, #D4A683, #B08B6F, #806552 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: #ff8223; --color-2: #faaf75; --color-3: #d4a683; --color-4: #b08b6f; --color-5: #806552. 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