← Back to Editor

#747A55 · #A31320 · #FF6B35 · #C0C990 · #D6CB99

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

#747A55

Grass Green · DimGray · Olive Green

HEX
#747A55
RGB
rgb(116, 122, 85)
HSL
hsl(70, 18%, 41%)
HSB
hsb(70, 30%, 48%)
CMYK
cmyk(5%, 0%, 30%, 52%)
Oklch
oklch(56.4% 0.054 115.7)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#A31320

Vermilion · FireBrick · Wine Red

HEX
#A31320
RGB
rgb(163, 19, 32)
HSL
hsl(355, 79%, 36%)
HSB
hsb(355, 88%, 64%)
CMYK
cmyk(0%, 88%, 80%, 36%)
Oklch
oklch(45.9% 0.175 24.4)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#FF6B35

Tangerine · Tomato · Warm Sun

HEX
#FF6B35
RGB
rgb(255, 107, 53)
HSL
hsl(16, 100%, 60%)
HSB
hsb(16, 79%, 100%)
CMYK
cmyk(0%, 58%, 79%, 0%)
Oklch
oklch(70.5% 0.193 39.2)

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

#C0C990

Fresh Green · Tan · Sunflower

HEX
#C0C990
RGB
rgb(192, 201, 144)
HSL
hsl(69, 35%, 68%)
HSB
hsb(69, 28%, 79%)
CMYK
cmyk(4%, 0%, 28%, 21%)
Oklch
oklch(81.5% 0.076 115.4)

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

#D6CB99

Goose Yellow · Tan · Sunflower

HEX
#D6CB99
RGB
rgb(214, 203, 153)
HSL
hsl(49, 43%, 72%)
HSB
hsb(49, 29%, 84%)
CMYK
cmyk(0%, 5%, 29%, 16%)
Oklch
oklch(83.9% 0.067 97.2)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

747A55
5C567B

Analogous

7B6F56
747A55
627B56

Triadic

747A55
56757B
7B5675

Split-Comp.

747A55
56627B
6F567B

Tetradic

747A55
567B6F
5C567B
7B5662

Contrast Matrix WCAG 2.1 Contrast

747A55
A31320
FF6B35
C0C990
D6CB99
—
1.7
Fail
1.6
Fail
2.6
Fail
2.8
Fail
1.7
Fail
—
2.8
Fail
4.5
AA Large
4.8
AA
1.6
Fail
2.8
Fail
—
1.6
Fail
1.7
Fail
2.6
Fail
4.5
AA Large
1.6
Fail
—
1.1
Fail
2.8
Fail
4.8
AA
1.7
Fail
1.1
Fail
—
White BG
4.5AA
7.9AAA
2.8Fail
1.8Fail
1.6Fail
Black BG
4.7AA
2.7Fail
7.4AAA
12.0AAA
12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

77775E
65631D
BFBE42
C4C49E
D1D1A5

Deuteranopia

767660
6D781C
C8D345
C3C3A1
D2D3A8

Tritanopia

746567
9C1A1A
F84C4F
C0A9AB
D5AFB1

Achromatopsia

747474
404040
919191
C0C0C0
C9C9C9

Shades & Tints Shades & Tints

#747A55

Dark
Light

#A31320

Dark
Light

#FF6B35

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #747a55;
  --color-2: #a31320;
  --color-3: #ff6b35;
  --color-4: #c0c990;
  --color-5: #d6cb99;
}

SCSS

$color-1: #747a55;
$color-2: #a31320;
$color-3: #ff6b35;
$color-4: #c0c990;
$color-5: #d6cb99;

TAILWIND

colors: {
  'brand-1': '#747a55',
  'brand-2': '#a31320',
  'brand-3': '#ff6b35',
  'brand-4': '#c0c990',
  'brand-5': '#d6cb99',
}

RGB Array

[116, 122, 85], [163, 19, 32], [255, 107, 53], [192, 201, 144], [214, 203, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #747A55, #A31320, #FF6B35, #C0C990, #D6CB99 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: #747a55; --color-2: #a31320; --color-3: #ff6b35; --color-4: #c0c990; --color-5: #d6cb99. 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