← Back to Editor

#748A6A · #AB9205 · #FB5A02 · #45270D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#748A6A

Celadon · Gray · Olive Green

HEX
#748A6A
RGB
rgb(116, 138, 106)
HSL
hsl(101, 13%, 48%)
HSB
hsb(101, 23%, 54%)
CMYK
cmyk(16%, 0%, 23%, 46%)
Oklch
oklch(60.7% 0.054 136.0)

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

#AB9205

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#AB9205
RGB
rgb(171, 146, 5)
HSL
hsl(51, 94%, 35%)
HSB
hsb(51, 97%, 67%)
CMYK
cmyk(0%, 15%, 97%, 33%)
Oklch
oklch(66.3% 0.136 96.8)

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

#FB5A02

Tangerine · OrangeRed · Amber Brown

HEX
#FB5A02
RGB
rgb(251, 90, 2)
HSL
hsl(21, 98%, 50%)
HSB
hsb(21, 99%, 98%)
CMYK
cmyk(0%, 64%, 99%, 2%)
Oklch
oklch(67.5% 0.210 40.4)

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

#45270D

Tangerine · Maroon · Cinnamon

HEX
#45270D
RGB
rgb(69, 39, 13)
HSL
hsl(28, 68%, 16%)
HSB
hsb(28, 81%, 27%)
CMYK
cmyk(0%, 43%, 81%, 73%)
Oklch
oklch(30.6% 0.059 58.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

748A6A
806A8A

Analogous

848A6A
748A6A
6A8A70

Triadic

748A6A
6A758A
8A6A75

Split-Comp.

748A6A
706A8A
8A6A84

Tetradic

748A6A
6A848A
806A8A
8A706A

Contrast Matrix WCAG 2.1 Contrast

748A6A
AB9205
FB5A02
45270D
—
1.2
Fail
1.2
Fail
3.6
AA Large
1.2
Fail
—
1.0
Fail
4.4
AA Large
1.2
Fail
1.0
Fail
—
4.2
AA Large
3.6
AA Large
4.4
AA Large
4.2
AA Large
—
White BG
3.8AA Large
3.1AA Large
3.2AA Large
13.6AAA
Black BG
5.6AA
6.8AA
6.6AA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7E72
A0A027
B5B417
383813

Deuteranopia

7C7B74
A2A42F
BFCB1C
3A3C15

Tritanopia

757879
AA4248
F3282C
441819

Achromatopsia

808080
898989
808080
2D2D2D

Shades & Tints Shades & Tints

#748A6A

Dark
Light

#AB9205

Dark
Light

#FB5A02

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #748a6a;
  --color-2: #ab9205;
  --color-3: #fb5a02;
  --color-4: #45270d;
}

SCSS

$color-1: #748a6a;
$color-2: #ab9205;
$color-3: #fb5a02;
$color-4: #45270d;

TAILWIND

colors: {
  'brand-1': '#748a6a',
  'brand-2': '#ab9205',
  'brand-3': '#fb5a02',
  'brand-4': '#45270d',
}

RGB Array

[116, 138, 106], [171, 146, 5], [251, 90, 2], [69, 39, 13]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #748A6A, #AB9205, #FB5A02, #45270D is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #748a6a; --color-2: #ab9205; --color-3: #fb5a02; --color-4: #45270d. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 4-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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