← Back to Editor

#F9EB1F · #67C457 · #6779AC · #783998 · #3C3838

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

#F9EB1F

Autumn Sage · Yellow · Sunflower

HEX
#F9EB1F
RGB
rgb(249, 235, 31)
HSL
hsl(56, 95%, 55%)
HSB
hsb(56, 88%, 98%)
CMYK
cmyk(0%, 6%, 88%, 2%)
Oklch
oklch(92.2% 0.191 105.1)

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

#67C457

Celadon · MediumSeaGreen · Olive Green

HEX
#67C457
RGB
rgb(103, 196, 87)
HSL
hsl(111, 48%, 55%)
HSB
hsb(111, 56%, 77%)
CMYK
cmyk(47%, 0%, 56%, 23%)
Oklch
oklch(73.9% 0.172 140.8)

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

#6779AC

Azure · LightSlateGray · Navy Blue

HEX
#6779AC
RGB
rgb(103, 121, 172)
HSL
hsl(224, 29%, 54%)
HSB
hsb(224, 40%, 67%)
CMYK
cmyk(40%, 30%, 0%, 33%)
Oklch
oklch(58.3% 0.082 268.9)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#783998

Dark Plum · DarkSlateBlue · Violet

HEX
#783998
RGB
rgb(120, 57, 152)
HSL
hsl(280, 45%, 41%)
HSB
hsb(280, 63%, 60%)
CMYK
cmyk(21%, 63%, 0%, 40%)
Oklch
oklch(47.0% 0.156 312.5)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#3C3838

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3C3838
RGB
rgb(60, 56, 56)
HSL
hsl(0, 3%, 23%)
HSB
hsb(0, 7%, 24%)
CMYK
cmyk(0%, 7%, 7%, 76%)
Oklch
oklch(34.5% 0.006 17.4)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9EB1F
1F2EF9

Analogous

F97E1F
F9EB1F
9BF91F

Triadic

F9EB1F
1FF9EB
EB1FF9

Split-Comp.

F9EB1F
1F9BF9
7E1FF9

Tetradic

F9EB1F
1FF97E
1F2EF9
F91F9B

Contrast Matrix WCAG 2.1 Contrast

F9EB1F
67C457
6779AC
783998
3C3838
—
1.8
Fail
3.5
AA Large
6.0
AA
9.3
AAA
1.8
Fail
—
2.0
Fail
3.4
AA Large
5.3
AA
3.5
AA Large
2.0
Fail
—
1.7
Fail
2.7
Fail
6.0
AA
3.4
AA Large
1.7
Fail
—
1.6
Fail
9.3
AAA
5.3
AA
2.7
Fail
1.6
Fail
—
White BG
1.2Fail
2.2Fail
4.3AA Large
7.4AAA
11.6AAA
Black BG
16.9AAA
9.6AAA
4.9AA
2.8Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F350
8F9071
6F6FA0
5D5C81
3A3A38

Deuteranopia

F4F55C
8A8378
6E6C9D
60657B
3B3B38

Tritanopia

F87780
6C868B
689694
756F6B
3C3838

Achromatopsia

D8D8D8
9C9C9C
797979
575757
393939

Shades & Tints Shades & Tints

#F9EB1F

Dark
Light

#67C457

Dark
Light

#6779AC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9eb1f;
  --color-2: #67c457;
  --color-3: #6779ac;
  --color-4: #783998;
  --color-5: #3c3838;
}

SCSS

$color-1: #f9eb1f;
$color-2: #67c457;
$color-3: #6779ac;
$color-4: #783998;
$color-5: #3c3838;

TAILWIND

colors: {
  'brand-1': '#f9eb1f',
  'brand-2': '#67c457',
  'brand-3': '#6779ac',
  'brand-4': '#783998',
  'brand-5': '#3c3838',
}

RGB Array

[249, 235, 31], [103, 196, 87], [103, 121, 172], [120, 57, 152], [60, 56, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9EB1F, #67C457, #6779AC, #783998, #3C3838 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: #f9eb1f; --color-2: #67c457; --color-3: #6779ac; --color-4: #783998; --color-5: #3c3838. 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