← Back to Editor

#F3B800 · #172C26 · #06393A · #2F7F7B · #F6C01D

A 5-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 AppData Visualization

Color Details Color Details

#F3B800

Ochre · Orange · Honey Gold

HEX
#F3B800
RGB
rgb(243, 184, 0)
HSL
hsl(45, 100%, 48%)
HSB
hsb(45, 100%, 95%)
CMYK
cmyk(0%, 24%, 100%, 5%)
Oklch
oklch(81.4% 0.167 85.2)

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

#172C26

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#172C26
RGB
rgb(23, 44, 38)
HSL
hsl(163, 31%, 13%)
HSB
hsb(163, 48%, 17%)
CMYK
cmyk(48%, 0%, 14%, 83%)
Oklch
oklch(27.3% 0.029 173.8)

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

#06393A

Lake Blue · DarkSlateGray · Peacock Green

HEX
#06393A
RGB
rgb(6, 57, 58)
HSL
hsl(181, 81%, 13%)
HSB
hsb(181, 90%, 23%)
CMYK
cmyk(90%, 2%, 0%, 77%)
Oklch
oklch(31.4% 0.050 196.9)

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

#2F7F7B

Mineral Blue · SeaGreen · Mint Ice

HEX
#2F7F7B
RGB
rgb(47, 127, 123)
HSL
hsl(177, 46%, 34%)
HSB
hsb(177, 63%, 50%)
CMYK
cmyk(63%, 0%, 3%, 50%)
Oklch
oklch(54.7% 0.077 190.5)

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

#F6C01D

Ginger · Gold · Sunflower

HEX
#F6C01D
RGB
rgb(246, 192, 29)
HSL
hsl(45, 92%, 54%)
HSB
hsb(45, 88%, 96%)
CMYK
cmyk(0%, 22%, 88%, 4%)
Oklch
oklch(83.3% 0.165 87.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3B800
003DF5

Analogous

F53D00
F3B800
B8F500

Triadic

F3B800
00F5B8
B800F5

Split-Comp.

F3B800
00B8F5
3D00F5

Tetradic

F3B800
00F53D
003DF5
F500B8

Contrast Matrix WCAG 2.1 Contrast

F3B800
172C26
06393A
2F7F7B
F6C01D
—
8.2
AAA
7.1
AAA
2.6
Fail
1.1
Fail
8.2
AAA
—
1.2
Fail
3.1
AA Large
8.8
AAA
7.1
AAA
1.2
Fail
—
2.7
Fail
7.5
AAA
2.6
Fail
3.1
AA Large
2.7
Fail
—
2.8
Fail
1.1
Fail
8.8
AAA
7.5
AAA
2.8
Fail
—
White BG
1.8Fail
14.7AAA
12.7AAA
4.7AA
1.7Fail
Black BG
11.7AAA
1.4Fail
1.7Fail
4.4AA Large
12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D92D
202027
1C1D3A
52527C
DFDE44

Deuteranopia

DDE137
1F1D28
19153A
4D477C
E2E64E

Tritanopia

F05057
182929
093A3A
337D7D
F3646A

Achromatopsia

B5B5B5
252525
2A2A2A
676767
BEBEBE

Shades & Tints Shades & Tints

#F3B800

Dark
Light

#172C26

Dark
Light

#06393A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3b800;
  --color-2: #172c26;
  --color-3: #06393a;
  --color-4: #2f7f7b;
  --color-5: #f6c01d;
}

SCSS

$color-1: #f3b800;
$color-2: #172c26;
$color-3: #06393a;
$color-4: #2f7f7b;
$color-5: #f6c01d;

TAILWIND

colors: {
  'brand-1': '#f3b800',
  'brand-2': '#172c26',
  'brand-3': '#06393a',
  'brand-4': '#2f7f7b',
  'brand-5': '#f6c01d',
}

RGB Array

[243, 184, 0], [23, 44, 38], [6, 57, 58], [47, 127, 123], [246, 192, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3B800, #172C26, #06393A, #2F7F7B, #F6C01D is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f3b800; --color-2: #172c26; --color-3: #06393a; --color-4: #2f7f7b; --color-5: #f6c01d. 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 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