← Back to Editor

#BA010A · #FF1010 · #DFC773 · #1C725E · #040F22

sea

A 5-color sea 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

#BA010A

Vermilion · FireBrick · Wine Red

HEX
#BA010A
RGB
rgb(186, 1, 10)
HSL
hsl(357, 99%, 37%)
HSB
hsb(357, 99%, 73%)
CMYK
cmyk(0%, 99%, 95%, 27%)
Oklch
oklch(49.6% 0.202 28.2)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#FF1010

Vermilion · Red · Passion Red

HEX
#FF1010
RGB
rgb(255, 16, 16)
HSL
hsl(0, 100%, 53%)
HSB
hsb(0, 94%, 100%)
CMYK
cmyk(0%, 94%, 94%, 0%)
Oklch
oklch(63.1% 0.254 28.8)

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

#DFC773

Ginger · BurlyWood · Sunflower

HEX
#DFC773
RGB
rgb(223, 199, 115)
HSL
hsl(47, 63%, 66%)
HSB
hsb(47, 48%, 87%)
CMYK
cmyk(0%, 11%, 48%, 13%)
Oklch
oklch(83.2% 0.108 93.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#1C725E

Mineral Blue · SeaGreen · Mint Ice

HEX
#1C725E
RGB
rgb(28, 114, 94)
HSL
hsl(166, 61%, 28%)
HSB
hsb(166, 75%, 45%)
CMYK
cmyk(75%, 0%, 18%, 55%)
Oklch
oklch(49.7% 0.086 173.4)

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

#040F22

Indigo · Black · Deep Sea Blue

HEX
#040F22
RGB
rgb(4, 15, 34)
HSL
hsl(218, 79%, 7%)
HSB
hsb(218, 88%, 13%)
CMYK
cmyk(88%, 56%, 0%, 87%)
Oklch
oklch(17.0% 0.044 258.5)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BA010A
01BCB2

Analogous

BC0168
BA010A
BC5501

Triadic

BA010A
0ABC01
010ABC

Split-Comp.

BA010A
01BC55
0168BC

Tetradic

BA010A
68BC01
01BCB2
5501BC

Contrast Matrix WCAG 2.1 Contrast

BA010A
FF1010
DFC773
1C725E
040F22
—
1.7
Fail
4.1
AA Large
1.2
Fail
2.8
Fail
1.7
Fail
—
2.4
Fail
1.5
Fail
4.9
AA
4.1
AA Large
2.4
Fail
—
3.5
AA Large
11.4
AAA
1.2
Fail
1.5
Fail
3.5
AA Large
—
3.3
AA Large
2.8
Fail
4.9
AA
11.4
AAA
3.3
AA Large
—
White BG
6.8AA
3.9AA Large
1.7Fail
5.8AA
19.2AAA
Black BG
3.1AA Large
5.3AA
12.6AAA
3.6AA Large
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A6808
989510
D5D487
414263
09091D

Deuteranopia

758307
A5B710
D6D88C
3C3664
08071C

Tritanopia

B10606
F31010
DE979B
206768
051A19

Achromatopsia

393939
575757
C5C5C5
565656
0E0E0E

Shades & Tints Shades & Tints

#BA010A

Dark
Light

#FF1010

Dark
Light

#DFC773

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ba010a;
  --color-2: #ff1010;
  --color-3: #dfc773;
  --color-4: #1c725e;
  --color-5: #040f22;
}

SCSS

$color-1: #ba010a;
$color-2: #ff1010;
$color-3: #dfc773;
$color-4: #1c725e;
$color-5: #040f22;

TAILWIND

colors: {
  'brand-1': '#ba010a',
  'brand-2': '#ff1010',
  'brand-3': '#dfc773',
  'brand-4': '#1c725e',
  'brand-5': '#040f22',
}

RGB Array

[186, 1, 10], [255, 16, 16], [223, 199, 115], [28, 114, 94], [4, 15, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #BA010A, #FF1010, #DFC773, #1C725E, #040F22 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: #ba010a; --color-2: #ff1010; --color-3: #dfc773; --color-4: #1c725e; --color-5: #040f22. 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 sea-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