← Back to Editor

#F68A1D · #FFCB00 · #84A550 · #1273AC

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#F68A1D

Ginger · GoldenRod · Warm Sun

HEX
#F68A1D
RGB
rgb(246, 138, 29)
HSL
hsl(30, 92%, 54%)
HSB
hsb(30, 88%, 96%)
CMYK
cmyk(0%, 44%, 88%, 4%)
Oklch
oklch(73.6% 0.169 57.9)

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

#FFCB00

Ochre · Gold · Honey Gold

HEX
#FFCB00
RGB
rgb(255, 203, 0)
HSL
hsl(48, 100%, 50%)
HSB
hsb(48, 100%, 100%)
CMYK
cmyk(0%, 20%, 100%, 0%)
Oklch
oklch(86.3% 0.176 89.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#84A550

Grass Green · Gray · Olive Green

HEX
#84A550
RGB
rgb(132, 165, 80)
HSL
hsl(83, 35%, 48%)
HSB
hsb(83, 52%, 65%)
CMYK
cmyk(20%, 0%, 52%, 35%)
Oklch
oklch(67.8% 0.119 126.9)

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

#1273AC

Lake Blue · Teal · Prussian Blue

HEX
#1273AC
RGB
rgb(18, 115, 172)
HSL
hsl(202, 81%, 37%)
HSB
hsb(202, 90%, 67%)
CMYK
cmyk(90%, 33%, 0%, 33%)
Oklch
oklch(53.3% 0.121 242.2)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F68A1D
1E8AF6

Analogous

F61E1E
F68A1D
F6F61E

Triadic

F68A1D
1EF68A
8A1EF6

Split-Comp.

F68A1D
1EF6F6
1E1EF6

Tetradic

F68A1D
1EF61E
1E8AF6
F61EF6

Contrast Matrix WCAG 2.1 Contrast

F68A1D
FFCB00
84A550
1273AC
—
1.6
Fail
1.1
Fail
2.1
Fail
1.6
Fail
—
1.8
Fail
3.4
AA Large
1.1
Fail
1.8
Fail
—
1.8
Fail
2.1
Fail
3.4
AA Large
1.8
Fail
—
White BG
2.4Fail
1.5Fail
2.8Fail
5.2AA
Black BG
8.6AAA
13.8AAA
7.5AAA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C637
E8E831
929365
3C3D9E

Deuteranopia

CED63E
ECEF3D
908E6A
362F9B

Tritanopia

F14C51
FC5860
867578
179391

Achromatopsia

9E9E9E
C3C3C3
919191
5C5C5C

Shades & Tints Shades & Tints

#F68A1D

Dark
Light

#FFCB00

Dark
Light

#84A550

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f68a1d;
  --color-2: #ffcb00;
  --color-3: #84a550;
  --color-4: #1273ac;
}

SCSS

$color-1: #f68a1d;
$color-2: #ffcb00;
$color-3: #84a550;
$color-4: #1273ac;

TAILWIND

colors: {
  'brand-1': '#f68a1d',
  'brand-2': '#ffcb00',
  'brand-3': '#84a550',
  'brand-4': '#1273ac',
}

RGB Array

[246, 138, 29], [255, 203, 0], [132, 165, 80], [18, 115, 172]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #F68A1D, #FFCB00, #84A550, #1273AC is ideal for: social media posters, mobile apps, e-commerce promos. 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: #f68a1d; --color-2: #ffcb00; --color-3: #84a550; --color-4: #1273ac. 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 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