← Back to Editor

#FFAF4D · #DBB357 · #BDB760 · #CCD4A3 · #A7C79F

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

#FFAF4D

Ginger · SandyBrown · Warm Sun

HEX
#FFAF4D
RGB
rgb(255, 175, 77)
HSL
hsl(33, 100%, 65%)
HSB
hsb(33, 70%, 100%)
CMYK
cmyk(0%, 31%, 70%, 0%)
Oklch
oklch(81.4% 0.145 68.4)

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

#DBB357

Ginger · SandyBrown · Sunflower

HEX
#DBB357
RGB
rgb(219, 179, 87)
HSL
hsl(42, 65%, 60%)
HSB
hsb(42, 60%, 86%)
CMYK
cmyk(0%, 18%, 60%, 14%)
Oklch
oklch(78.4% 0.120 85.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#BDB760

Autumn Sage · Tan · Sunflower

HEX
#BDB760
RGB
rgb(189, 183, 96)
HSL
hsl(56, 41%, 56%)
HSB
hsb(56, 49%, 74%)
CMYK
cmyk(0%, 3%, 49%, 26%)
Oklch
oklch(76.6% 0.110 105.2)

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

#CCD4A3

Willow Green · Silver · Apple Green

HEX
#CCD4A3
RGB
rgb(204, 212, 163)
HSL
hsl(70, 36%, 74%)
HSB
hsb(70, 23%, 83%)
CMYK
cmyk(4%, 0%, 23%, 17%)
Oklch
oklch(85.1% 0.066 115.3)

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

#A7C79F

Celadon · DarkSeaGreen · Apple Green

HEX
#A7C79F
RGB
rgb(167, 199, 159)
HSL
hsl(108, 26%, 70%)
HSB
hsb(108, 20%, 78%)
CMYK
cmyk(16%, 0%, 20%, 22%)
Oklch
oklch(79.5% 0.065 139.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFAF4D
4D9DFF

Analogous

FF554D
FFAF4D
F6FF4D

Triadic

FFAF4D
4DFFAF
AF4DFF

Split-Comp.

FFAF4D
4DF6FF
554DFF

Tetradic

FFAF4D
4DFF55
4D9DFF
FF4DF6

Contrast Matrix WCAG 2.1 Contrast

FFAF4D
DBB357
BDB760
CCD4A3
A7C79F
—
1.1
Fail
1.1
Fail
1.2
Fail
1.0
Fail
1.1
Fail
—
1.0
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.0
Fail
—
1.3
Fail
1.1
Fail
1.2
Fail
1.3
Fail
1.3
Fail
—
1.2
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.2
Fail
—
White BG
1.8Fail
2.0Fail
2.1Fail
1.6Fail
1.9Fail
Black BG
11.5AAA
10.6AAA
10.1AAA
13.5AAA
11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDC65
CAC96D
BABA75
CFD0AF
B5B5A9

Deuteranopia

E1E76A
CCCF73
BBBB7A
CFCEB2
B3B1AB

Tritanopia

FB777C
D97F83
BD8689
CCB8BA
A9B0B2

Achromatopsia

BCBCBC
B4B4B4
AFAFAF
CCCCCC
B9B9B9

Shades & Tints Shades & Tints

#FFAF4D

Dark
Light

#DBB357

Dark
Light

#BDB760

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffaf4d;
  --color-2: #dbb357;
  --color-3: #bdb760;
  --color-4: #ccd4a3;
  --color-5: #a7c79f;
}

SCSS

$color-1: #ffaf4d;
$color-2: #dbb357;
$color-3: #bdb760;
$color-4: #ccd4a3;
$color-5: #a7c79f;

TAILWIND

colors: {
  'brand-1': '#ffaf4d',
  'brand-2': '#dbb357',
  'brand-3': '#bdb760',
  'brand-4': '#ccd4a3',
  'brand-5': '#a7c79f',
}

RGB Array

[255, 175, 77], [219, 179, 87], [189, 183, 96], [204, 212, 163], [167, 199, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFAF4D, #DBB357, #BDB760, #CCD4A3, #A7C79F 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: #ffaf4d; --color-2: #dbb357; --color-3: #bdb760; --color-4: #ccd4a3; --color-5: #a7c79f. 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