← Back to Editor

#F7BB09 · #DD8C00 · #B05E68 · #A2867C · #9F9F9F

warm

A 5-color warm 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

#F7BB09

Ochre · Orange · Honey Gold

HEX
#F7BB09
RGB
rgb(247, 187, 9)
HSL
hsl(45, 94%, 50%)
HSB
hsb(45, 96%, 97%)
CMYK
cmyk(0%, 24%, 96%, 3%)
Oklch
oklch(82.4% 0.168 85.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#DD8C00

Ochre · DarkGoldenRod · Amber Brown

HEX
#DD8C00
RGB
rgb(221, 140, 0)
HSL
hsl(38, 100%, 43%)
HSB
hsb(38, 100%, 87%)
CMYK
cmyk(0%, 37%, 100%, 13%)
Oklch
oklch(70.7% 0.154 69.3)

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

#B05E68

Crimson · Sienna · Passion Red

HEX
#B05E68
RGB
rgb(176, 94, 104)
HSL
hsl(353, 34%, 53%)
HSB
hsb(353, 47%, 69%)
CMYK
cmyk(0%, 47%, 41%, 31%)
Oklch
oklch(58.0% 0.107 13.2)

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

#A2867C

Tangerine · Gray · Warm Sun

HEX
#A2867C
RGB
rgb(162, 134, 124)
HSL
hsl(16, 17%, 56%)
HSB
hsb(16, 23%, 64%)
CMYK
cmyk(0%, 17%, 23%, 36%)
Oklch
oklch(64.3% 0.037 40.6)

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

#9F9F9F

Ash · DarkGray · Silver Sand

HEX
#9F9F9F
RGB
rgb(159, 159, 159)
HSL
hsl(0, 0%, 62%)
HSB
hsb(0, 0%, 62%)
CMYK
cmyk(0%, 0%, 0%, 38%)
Oklch
oklch(70.3% 0.000 89.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7BB09
0844F7

Analogous

F74408
F7BB09
BBF708

Triadic

F7BB09
08F7BB
BB08F7

Split-Comp.

F7BB09
08BBF7
4408F7

Tetradic

F7BB09
08F744
0844F7
F708BB

Contrast Matrix WCAG 2.1 Contrast

F7BB09
DD8C00
B05E68
A2867C
9F9F9F
—
1.5
Fail
2.6
Fail
1.9
Fail
1.5
Fail
1.5
Fail
—
1.7
Fail
1.3
Fail
1.0
Fail
2.6
Fail
1.7
Fail
—
1.3
Fail
1.7
Fail
1.9
Fail
1.3
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
1.0
Fail
1.7
Fail
1.3
Fail
—
White BG
1.7Fail
2.7Fail
4.5AA
3.4AA Large
2.6Fail
Black BG
12.1AAA
7.8AAA
4.6AA
6.2AA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDC34
BAB922
8C8C66
96967E
9F9F9F

Deuteranopia

E1E53E
BFC52A
919765
989A7F
9F9F9F

Tritanopia

F4565E
D93D43
AC6463
A18081
9F9F9F

Achromatopsia

B9B9B9
949494
787878
8D8D8D
9F9F9F

Shades & Tints Shades & Tints

#F7BB09

Dark
Light

#DD8C00

Dark
Light

#B05E68

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7bb09;
  --color-2: #dd8c00;
  --color-3: #b05e68;
  --color-4: #a2867c;
  --color-5: #9f9f9f;
}

SCSS

$color-1: #f7bb09;
$color-2: #dd8c00;
$color-3: #b05e68;
$color-4: #a2867c;
$color-5: #9f9f9f;

TAILWIND

colors: {
  'brand-1': '#f7bb09',
  'brand-2': '#dd8c00',
  'brand-3': '#b05e68',
  'brand-4': '#a2867c',
  'brand-5': '#9f9f9f',
}

RGB Array

[247, 187, 9], [221, 140, 0], [176, 94, 104], [162, 134, 124], [159, 159, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F7BB09, #DD8C00, #B05E68, #A2867C, #9F9F9F 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: #f7bb09; --color-2: #dd8c00; --color-3: #b05e68; --color-4: #a2867c; --color-5: #9f9f9f. 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