← Back to Editor

#525068 · #7D6C65 · #A98762 · #D4A360 · #FFBE5D

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#525068

Deep Indigo · DimGray · Prussian Blue

HEX
#525068
RGB
rgb(82, 80, 104)
HSL
hsl(245, 13%, 36%)
HSB
hsb(245, 23%, 41%)
CMYK
cmyk(21%, 23%, 0%, 59%)
Oklch
oklch(44.3% 0.039 288.5)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#7D6C65

Tangerine · DimGray · Amber Brown

HEX
#7D6C65
RGB
rgb(125, 108, 101)
HSL
hsl(18, 11%, 44%)
HSB
hsb(18, 19%, 49%)
CMYK
cmyk(0%, 14%, 19%, 51%)
Oklch
oklch(54.5% 0.024 43.7)

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

#A98762

Ginger · Gray · Warm Sun

HEX
#A98762
RGB
rgb(169, 135, 98)
HSL
hsl(31, 29%, 52%)
HSB
hsb(31, 42%, 66%)
CMYK
cmyk(0%, 20%, 42%, 34%)
Oklch
oklch(64.6% 0.066 68.6)

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

#D4A360

Ginger · SandyBrown · Warm Sun

HEX
#D4A360
RGB
rgb(212, 163, 96)
HSL
hsl(35, 57%, 60%)
HSB
hsb(35, 55%, 83%)
CMYK
cmyk(0%, 23%, 55%, 17%)
Oklch
oklch(74.7% 0.103 73.8)

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

#FFBE5D

Ginger · SandyBrown · Warm Sun

HEX
#FFBE5D
RGB
rgb(255, 190, 93)
HSL
hsl(36, 100%, 68%)
HSB
hsb(36, 64%, 100%)
CMYK
cmyk(0%, 25%, 64%, 0%)
Oklch
oklch(84.3% 0.135 75.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

525068
666850

Analogous

505A68
525068
5E5068

Triadic

525068
685250
506852

Split-Comp.

525068
685E50
5A6850

Tetradic

525068
68505A
666850
50685E

Contrast Matrix WCAG 2.1 Contrast

525068
7D6C65
A98762
D4A360
FFBE5D
—
1.6
Fail
2.3
Fail
3.4
AA Large
4.7
AA
1.6
Fail
—
1.5
Fail
2.2
Fail
3.0
AA Large
2.3
Fail
1.5
Fail
—
1.5
Fail
2.0
Fail
3.4
AA Large
2.2
Fail
1.5
Fail
—
1.4
Fail
4.7
AA
3.0
AA Large
2.0
Fail
1.4
Fail
—
White BG
7.8AAA
5.0AA
3.3AA Large
2.3Fail
1.6Fail
Black BG
2.7Fail
4.2AA Large
6.3AA
9.2AAA
12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

515162
767567
9A9A6B
BFBE70
E3E274

Deuteranopia

515161
777867
9C9F6D
C2C574
E7EC7A

Tritanopia

525E5D
7C6868
A77274
D27D80
FC878B

Achromatopsia

535353
707070
8D8D8D
AAAAAA
C6C6C6

Shades & Tints Shades & Tints

#525068

Dark
Light

#7D6C65

Dark
Light

#A98762

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #525068;
  --color-2: #7d6c65;
  --color-3: #a98762;
  --color-4: #d4a360;
  --color-5: #ffbe5d;
}

SCSS

$color-1: #525068;
$color-2: #7d6c65;
$color-3: #a98762;
$color-4: #d4a360;
$color-5: #ffbe5d;

TAILWIND

colors: {
  'brand-1': '#525068',
  'brand-2': '#7d6c65',
  'brand-3': '#a98762',
  'brand-4': '#d4a360',
  'brand-5': '#ffbe5d',
}

RGB Array

[82, 80, 104], [125, 108, 101], [169, 135, 98], [212, 163, 96], [255, 190, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #525068, #7D6C65, #A98762, #D4A360, #FFBE5D 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: #525068; --color-2: #7d6c65; --color-3: #a98762; --color-4: #d4a360; --color-5: #ffbe5d. 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