← Back to Editor

#F7C368 · #FFFFD9 · #CFCF97 · #8F8E60 · #424A3C

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 LibraryData Visualization

Color Details Color Details

#F7C368

Ginger · SandyBrown · Warm Sun

HEX
#F7C368
RGB
rgb(247, 195, 104)
HSL
hsl(38, 90%, 69%)
HSB
hsb(38, 58%, 97%)
CMYK
cmyk(0%, 21%, 58%, 3%)
Oklch
oklch(84.6% 0.124 79.8)

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

#FFFFD9

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFFD9
RGB
rgb(255, 255, 217)
HSL
hsl(60, 100%, 93%)
HSB
hsb(60, 15%, 100%)
CMYK
cmyk(0%, 0%, 15%, 0%)
Oklch
oklch(99.0% 0.049 107.3)

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

#CFCF97

Fresh Green · Tan · Sunflower

HEX
#CFCF97
RGB
rgb(207, 207, 151)
HSL
hsl(60, 37%, 70%)
HSB
hsb(60, 27%, 81%)
CMYK
cmyk(0%, 0%, 27%, 19%)
Oklch
oklch(84.1% 0.074 107.9)

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

#8F8E60

Autumn Sage · Gray · Honey Gold

HEX
#8F8E60
RGB
rgb(143, 142, 96)
HSL
hsl(59, 20%, 47%)
HSB
hsb(59, 33%, 56%)
CMYK
cmyk(0%, 1%, 33%, 44%)
Oklch
oklch(63.6% 0.064 107.0)

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

#424A3C

Celadon · DarkSlateGray · Forest Green

HEX
#424A3C
RGB
rgb(66, 74, 60)
HSL
hsl(94, 10%, 26%)
HSB
hsb(94, 19%, 29%)
CMYK
cmyk(11%, 0%, 19%, 71%)
Oklch
oklch(39.7% 0.025 131.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7C368
699DF7

Analogous

F77C69
F7C368
E4F769

Triadic

F7C368
69F7C3
C369F7

Split-Comp.

F7C368
69E4F7
7C69F7

Tetradic

F7C368
69F77C
699DF7
F769E4

Contrast Matrix WCAG 2.1 Contrast

F7C368
FFFFD9
CFCF97
8F8E60
424A3C
—
1.6
Fail
1.0
Fail
2.1
Fail
5.7
AA
1.6
Fail
—
1.6
Fail
3.3
AA Large
9.0
AAA
1.0
Fail
1.6
Fail
—
2.1
Fail
5.7
AA
2.1
Fail
3.3
AA Large
2.1
Fail
—
2.7
Fail
5.7
AA
9.0
AAA
5.7
AA
2.7
Fail
—
White BG
1.6Fail
1.0Fail
1.6Fail
3.4AA Large
9.2AAA
Black BG
13.0AAA
20.6AAA
13.0AAA
6.2AA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E07E
FFFFE2
CFCFA5
8F8F6B
45463F

Deuteranopia

E4E783
FFFFE4
CFCFA8
8F8F6E
454440

Tritanopia

F48F93
FFE9EB
CFAFB2
8F7476
424243

Achromatopsia

C8C8C8
FBFBFB
C9C9C9
898989
464646

Shades & Tints Shades & Tints

#F7C368

Dark
Light

#FFFFD9

Dark
Light

#CFCF97

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7c368;
  --color-2: #ffffd9;
  --color-3: #cfcf97;
  --color-4: #8f8e60;
  --color-5: #424a3c;
}

SCSS

$color-1: #f7c368;
$color-2: #ffffd9;
$color-3: #cfcf97;
$color-4: #8f8e60;
$color-5: #424a3c;

TAILWIND

colors: {
  'brand-1': '#f7c368',
  'brand-2': '#ffffd9',
  'brand-3': '#cfcf97',
  'brand-4': '#8f8e60',
  'brand-5': '#424a3c',
}

RGB Array

[247, 195, 104], [255, 255, 217], [207, 207, 151], [143, 142, 96], [66, 74, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F7C368, #FFFFD9, #CFCF97, #8F8E60, #424A3C is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f7c368; --color-2: #ffffd9; --color-3: #cfcf97; --color-4: #8f8e60; --color-5: #424a3c. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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