← Back to Editor

#F3DA38 · #739B1E · #227259 · #1D2925 · #CD3A56

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 LibraryData Visualization

Color Details Color Details

#F3DA38

Autumn Sage · Gold · Sunflower

HEX
#F3DA38
RGB
rgb(243, 218, 56)
HSL
hsl(52, 89%, 59%)
HSB
hsb(52, 77%, 95%)
CMYK
cmyk(0%, 10%, 77%, 5%)
Oklch
oklch(88.3% 0.169 100.0)

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

#739B1E

Grass Green · Olive · Forest Green

HEX
#739B1E
RGB
rgb(115, 155, 30)
HSL
hsl(79, 68%, 36%)
HSB
hsb(79, 81%, 61%)
CMYK
cmyk(26%, 0%, 81%, 39%)
Oklch
oklch(63.7% 0.152 126.6)

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

#227259

Mineral Blue · SeaGreen · Mint Ice

HEX
#227259
RGB
rgb(34, 114, 89)
HSL
hsl(161, 54%, 29%)
HSB
hsb(161, 70%, 45%)
CMYK
cmyk(70%, 0%, 22%, 55%)
Oklch
oklch(49.7% 0.087 168.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#1D2925

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#1D2925
RGB
rgb(29, 41, 37)
HSL
hsl(160, 17%, 14%)
HSB
hsb(160, 29%, 16%)
CMYK
cmyk(29%, 0%, 10%, 84%)
Oklch
oklch(26.8% 0.018 172.4)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#CD3A56

Crimson · Crimson · Passion Red

HEX
#CD3A56
RGB
rgb(205, 58, 86)
HSL
hsl(349, 60%, 52%)
HSB
hsb(349, 72%, 80%)
CMYK
cmyk(0%, 72%, 58%, 20%)
Oklch
oklch(57.4% 0.183 14.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3DA38
3952F3

Analogous

F37E39
F3DA38
AFF339

Triadic

F3DA38
39F3DB
DB39F3

Split-Comp.

F3DA38
39AFF3
7E39F3

Tetradic

F3DA38
39F37E
3952F3
F339AF

Contrast Matrix WCAG 2.1 Contrast

F3DA38
739B1E
227259
1D2925
CD3A56
—
2.3
Fail
4.1
AA Large
10.7
AAA
3.4
AA Large
2.3
Fail
—
1.8
Fail
4.6
AA
1.5
Fail
4.1
AA Large
1.8
Fail
—
2.6
Fail
1.2
Fail
10.7
AAA
4.6
AA
2.6
Fail
—
3.1
AA Large
3.4
AA Large
1.5
Fail
1.2
Fail
3.1
AA Large
—
White BG
1.4Fail
3.3AA Large
5.8AA
15.0AAA
4.8AA
Black BG
14.9AAA
6.4AA
3.6AA Large
1.4Fail
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E85F
84853C
45455F
222226
8D8C4F

Deuteranopia

EAEC69
827F44
403A61
222126
96A14E

Tritanopia

F27E85
755459
266465
1E2727
C64A49

Achromatopsia

CFCFCF
818181
575757
252525
696969

Shades & Tints Shades & Tints

#F3DA38

Dark
Light

#739B1E

Dark
Light

#227259

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3da38;
  --color-2: #739b1e;
  --color-3: #227259;
  --color-4: #1d2925;
  --color-5: #cd3a56;
}

SCSS

$color-1: #f3da38;
$color-2: #739b1e;
$color-3: #227259;
$color-4: #1d2925;
$color-5: #cd3a56;

TAILWIND

colors: {
  'brand-1': '#f3da38',
  'brand-2': '#739b1e',
  'brand-3': '#227259',
  'brand-4': '#1d2925',
  'brand-5': '#cd3a56',
}

RGB Array

[243, 218, 56], [115, 155, 30], [34, 114, 89], [29, 41, 37], [205, 58, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3DA38, #739B1E, #227259, #1D2925, #CD3A56 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f3da38; --color-2: #739b1e; --color-3: #227259; --color-4: #1d2925; --color-5: #cd3a56. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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