#FF2E6E
#3D2BFF
#FFE94A
#0C0A14
Background
Primary Accent
Secondary
Body Text

Arcade Cabinet Color Palette

#FF2E6E · #3D2BFF · #FFE94A · #0C0A14

AA
WCAG Grade
5.5:1
Contrast Ratio
668
Saves
2,912
AI Copies
AI Prompt

Use #FF2E6E as the background. Use #3D2BFF as the primary accent. Use #FFE94A as secondary. Use #0C0A14 as body text/supporting color. Palette mood: Arcade Cabinet — neon, night, vintage, candy.

Hex Codes, RGB & CMYK Color Values

Technical breakdown for the Arcade Cabinet color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).

Swatch Design Role HEX RGB CMYK HSL
Background
Luminance: 24.3%
255, 46, 110 0%, 82%, 57%, 0% 342°, 100%, 59%
Primary Accent
Luminance: 9.9%
61, 43, 255 76%, 83%, 0%, 0% 245°, 100%, 58%
Secondary
Luminance: 80.0%
255, 233, 74 0%, 9%, 71%, 0% 53°, 100%, 65%
Body Text
Luminance: 0.3%
12, 10, 20 40%, 50%, 0%, 92% 252°, 33%, 6%

Arcade Cabinet Tints & Shades

Hover states, borders and elevation need lighter and darker steps of your base colors. Here are computed tints and shades for every color in the Arcade Cabinet palette — click any swatch to copy its hex.

#FF2E6E saturated rose-red
#3D2BFF saturated blue
#FFE94A saturated yellow
#0C0A14 gently saturated violet

Arcade Cabinet Palette Contrast Matrix (WCAG 2.1)

Every color tested as text on every other color as background. Body copy needs 4.5:1 (AA), large text and UI components 3:1. AAA requires 7:1.

Text on Background Preview Ratio Grade Safe For
#0C0A14 on #FFE94A
Aa Sample Text
15.91:1 AAA Body text, headings, UI
#FFE94A on #0C0A14
Aa Sample Text
15.91:1 AAA Body text, headings, UI
#FFE94A on #3D2BFF
Aa Sample Text
5.69:1 AA Body text, UI
#3D2BFF on #FFE94A
Aa Sample Text
5.69:1 AA Body text, UI
#0C0A14 on #FF2E6E
Aa Sample Text
5.49:1 AA Body text, UI
#FF2E6E on #0C0A14
Aa Sample Text
5.49:1 AA Body text, UI
#FFE94A on #FF2E6E
Aa Sample Text
2.90:1 Fail Decorative use only
#FF2E6E on #FFE94A
Aa Sample Text
2.90:1 Fail Decorative use only
#0C0A14 on #3D2BFF
Aa Sample Text
2.79:1 Fail Decorative use only
#3D2BFF on #0C0A14
Aa Sample Text
2.79:1 Fail Decorative use only
#3D2BFF on #FF2E6E
Aa Sample Text
1.96:1 Fail Decorative use only
#FF2E6E on #3D2BFF
Aa Sample Text
1.96:1 Fail Decorative use only

Arcade Cabinet Color Psychology & Meaning

An arcade cabinet paints its marquee in pink and blue under a black side panel, lit from inside so it is bright in a dim room, and this palette is cabinet pink with marquee yellow. It feels retro and addictive, the color of a machine that glows like a toy.

Color Harmony: Triadic Scheme

The Arcade Cabinet palette is built using a triadic relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.

Hue Wheel

A triadic palette is often preferred by professional designers because it balances visual interest with cohesion.

History & Design Context

Arcade cabinets used backlit marquees and artwork printed on translucent vinyl, which is why they read as saturated colour blocks in a dark room and became a key reference for retro game branding.

Best Design Use Cases

Use the cabinet pink for wide surfaces, cabinet blue for buttons and links, marquee yellow for secondary details, and cabinet black for text.

Industries This Palette Suits

Arcades, festivals, night markets, film and television.

Colors That Pair Well With Arcade Cabinet

Need a fifth color? These three companions are computed from the palette's own hue positions on the color wheel, so they extend the scheme without breaking its harmony.

yellow

directly opposite #3D2BFF on the wheel — the strongest accent for CTAs and highlights when you need maximum energy

violet

30° beside #3D2BFF — a calm secondary that extends the palette without adding tension

tinted neutral

a ink-black carrying the palette's own hue — perfect for surfaces and dividers

Using Arcade Cabinet Without Breaking Accessibility

  • Avoid #3D2BFF for small UI elements on #FF2E6E — at 2.0:1 it misses the 3:1 WCAG threshold; darken it with a shade from the ramp below.
  • Set body text in #0C0A14 — 5.5:1 against #FF2E6E passes WCAG AA (AA) for long-form reading.
  • Don't use #FFE94A behind body text — this light tone works better for surfaces, badges and dividers than for reading areas.

How to Implement the Arcade Cabinet Color Scheme

To use this Arcade Cabinet color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.

Option 1: CSS Variables

:root { 
  /* {name} Palette - ihatecolors.com */{'
'}  --color-bg: {colors[0]};{'
'}  --color-primary: {colors[1]};{'
'}  --color-secondary: {colors[2]};{'
'}  --color-text: {colors[3]};{'
'} {'}'}

Web Design Tip

Use #FF2E6E for the main background and #3D2BFF for primary buttons. This creates a high-contrast focal point.

Accessibility Note

The contrast ratio between #0C0A14 and #FF2E6E is 5.49:1 (AA). Ensure your body text remains legible.

Arcade Cabinet Palette — Frequently Asked Questions

What are the hex codes in the Arcade Cabinet color palette?

The Arcade Cabinet palette contains #FF2E6E, #3D2BFF, #FFE94A, #0C0A14. Click any swatch on this page to copy its value, or export all four at once as CSS variables, Tailwind config, SCSS or a Figma-ready list.

Is the Arcade Cabinet color palette accessible (WCAG)?

Yes for its strongest pairings: #0C0A14 on #FFE94A reaches 15.9:1 (AAA). For body text always keep a 4.5:1 ratio and for large UI elements 3:1 — the full contrast matrix above shows the exact score for every color-on-color combination in this palette.

What colors go well with the Arcade Cabinet palette?

Beyond its own four colors, #EDFF29, #A434F4, #1A0F12 extend it naturally: the complementary hue for high-energy accents, an analogous neighbor for calm transitions, and a tinted neutral for surfaces. All three are computed from this palette's hues on the color wheel.

What mood does the Arcade Cabinet palette create?

Arcade Cabinet reads as neon, night, vintage. Saturated blue drives the personality, grounded by saturated rose-red — a combination that works best when the light base gets most of the canvas.

Can I use the Arcade Cabinet color palette commercially?

Yes. Individual color values can't be copyrighted, so the Arcade Cabinet palette is free for personal, client and commercial work — websites, branding, apps, print and social content, with no attribution required.

How do I add the Arcade Cabinet palette to Tailwind or CSS?

Use the export panel on this page: CSS variables, a Tailwind config block, SCSS variables, or a Figma copy list are generated from Arcade Cabinet's exact values, including the tint and shade ramps shown above.

Similar Palettes

Live Preview
Generate Similar ✦
Skip to content