← Back to Editor

#FBF7D1 · #C5CBA7 · #FD986A · #8E7570 · #483C30

summer

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

#FBF7D1

Fresh Green · Beige · Lemon Cream

HEX
#FBF7D1
RGB
rgb(251, 247, 209)
HSL
hsl(54, 84%, 90%)
HSB
hsb(54, 17%, 98%)
CMYK
cmyk(0%, 2%, 17%, 2%)
Oklch
oklch(97.0% 0.049 102.3)

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

#C5CBA7

Willow Green · Silver · Apple Green

HEX
#C5CBA7
RGB
rgb(197, 203, 167)
HSL
hsl(70, 26%, 73%)
HSB
hsb(70, 18%, 80%)
CMYK
cmyk(3%, 0%, 18%, 20%)
Oklch
oklch(82.8% 0.049 115.2)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#FD986A

Apricot · LightSalmon · Warm Sun

HEX
#FD986A
RGB
rgb(253, 152, 106)
HSL
hsl(19, 97%, 70%)
HSB
hsb(19, 58%, 99%)
CMYK
cmyk(0%, 40%, 58%, 1%)
Oklch
oklch(77.5% 0.136 44.7)

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

#8E7570

Crimson · Gray · Passion Red

HEX
#8E7570
RGB
rgb(142, 117, 112)
HSL
hsl(10, 12%, 50%)
HSB
hsb(10, 21%, 56%)
CMYK
cmyk(0%, 18%, 21%, 44%)
Oklch
oklch(58.5% 0.032 31.3)

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

#483C30

Ochre · DarkSlateGray · Cinnamon

HEX
#483C30
RGB
rgb(72, 60, 48)
HSL
hsl(30, 20%, 24%)
HSB
hsb(30, 33%, 28%)
CMYK
cmyk(0%, 17%, 33%, 72%)
Oklch
oklch(36.5% 0.026 66.9)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBF7D1
D0D4FB

Analogous

FBE1D0
FBF7D1
EAFBD0

Triadic

FBF7D1
D0FBF7
F7D0FB

Split-Comp.

FBF7D1
D0EAFB
E1D0FB

Tetradic

FBF7D1
D0FBE1
D0D4FB
FBD0EA

Contrast Matrix WCAG 2.1 Contrast

FBF7D1
C5CBA7
FD986A
8E7570
483C30
—
1.5
Fail
2.0
Fail
3.9
AA Large
9.8
AAA
1.5
Fail
—
1.3
Fail
2.5
Fail
6.3
AA
2.0
Fail
1.3
Fail
—
2.0
Fail
5.0
AA
3.9
AA Large
2.5
Fail
2.0
Fail
—
2.5
Fail
9.8
AAA
6.3
AA
5.0
AA
2.5
Fail
—
White BG
1.1Fail
1.7Fail
2.1Fail
4.3AA Large
10.7AAA
Black BG
19.3AAA
12.5AAA
9.9AAA
4.9AA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9DA
C8C8B0
D1D075
838371
434333

Deuteranopia

FAFADC
C7C7B2
D7DF78
858772
444434

Tritanopia

FBE1E3
C5B7B8
F87E80
8D7272
473536

Achromatopsia

F4F4F4
C5C5C5
B1B1B1
7C7C7C
3E3E3E

Shades & Tints Shades & Tints

#FBF7D1

Dark
Light

#C5CBA7

Dark
Light

#FD986A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbf7d1;
  --color-2: #c5cba7;
  --color-3: #fd986a;
  --color-4: #8e7570;
  --color-5: #483c30;
}

SCSS

$color-1: #fbf7d1;
$color-2: #c5cba7;
$color-3: #fd986a;
$color-4: #8e7570;
$color-5: #483c30;

TAILWIND

colors: {
  'brand-1': '#fbf7d1',
  'brand-2': '#c5cba7',
  'brand-3': '#fd986a',
  'brand-4': '#8e7570',
  'brand-5': '#483c30',
}

RGB Array

[251, 247, 209], [197, 203, 167], [253, 152, 106], [142, 117, 112], [72, 60, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #FBF7D1, #C5CBA7, #FD986A, #8E7570, #483C30 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: #fbf7d1; --color-2: #c5cba7; --color-3: #fd986a; --color-4: #8e7570; --color-5: #483c30. 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 summer-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