uiwheel
Open Wheel
Base Hex: #F43F5E

Coral Pink Color Wheel & UI Harmonies

#F43E5CHue 350°analogous

Drag the handle around the wheel or use sliders below

RGB(244, 62, 92)
Hue Angle350°
Saturation89%
Lightness60%

Generated Harmonies (3 Colors)

Adjacent Left

#F43EB7

oklch(0.671 0.243 345.0)

Primary Base

#F43E5C

oklch(0.644 0.216 17.0)

Adjacent Right

#F47B3E

oklch(0.712 0.166 45.2)

Design System Validation

Live UI Component Preview

UI

Apex Analytics

Team Dashboard

Harmonized Active
Total Conversion+18.4%

$84,290

Active Users+34.2%

14,820

Harmonic Health99.8%

Optimal

Interactive Button & State Styles

Verify clickability, state contrasts, and visual weight across primary and secondary controls.

Badge Tag (#F47B3E)
Accessibility Audit

WCAG 2.1 Contrast Matrix

Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).

Color RoleHexOn Pure White (#FFF)On Dark Obsidian (#0B0F19)Recommended Usage
Adjacent Left
#F43EB7
3.38:1(AA (large text))
5.67:1(AA)
Best on Dark UI / Buttons
Primary Base
#F43E5C
3.69:1(AA (large text))
5.19:1(AA)
Best on Dark UI / Buttons
Adjacent Right
#F47B3E
2.71:1(Fail)
7.07:1(AAA)
Best on Dark UI / Buttons
Design Token Generator

50–950 Tailwind Shade Ramp

Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.

Developer Export Center

Ready-to-Use Code Snippets

// tailwind.config.js / CSS @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#FAF5F8',
          100: '#F4E7EF',
          200: '#FBB2E2',
          300: '#F882D0',
          400: '#F448BB',
          500: '#F43EB7',
          600: '#CA0C8B',
          700: '#A40A70',
          800: '#780753',
          900: '#57003A',
          950: '#330022',
        },
        secondary: '#F43E5C',
        accent: '#F47B3E',
      }
    }
  }
};
Color Architecture & Design Systems

How to Use Coral Pink in Digital Product Design

Coral Pink (350° hue) merges the urgent magnetism of crimson with the playful optimism of bubblegum pink. It cuts through monotonous neutral interfaces instantly, commanding user clicks and drawing laser focus to promotions, likes, and highlights.

✓Recommended UI Applications

Hero conversion buttons, heart/favorite icons, limited-time badges, and gradient stops alongside purple or orange. Ideal for consumer apps, creator platforms, and lifestyle shopping.

⚠Accessibility & Contrast Guidelines

Bright coral pink (#F43F5E) provides 4.0:1 contrast with white text. To guarantee AA compliance on small text (4.5:1), use Rose 600 (#E11D48) or pair with deep plum/black text.

Curated UI Pairings for Coral Pink

Expertly tested color coordinates that harmonize with Coral Pink without visual clashes.

Neon Tangerine

#FB923C

Analogous warmth for energetic gradients and micro-badges.

Dark Velvet

#18181B

Onyx background letting coral highlights ignite with neon intensity.

Soft Blush Tint

#FFF1F2

Delicate surface wash for cards, toast banners, and modals.

Coral Pink Design System Token Specifications

Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.

HEX CODE

#F43F5E

RGB VALUE

rgb(244, 63, 94)

HSL VALUE

hsl(350°, 89%, 60%)

OKLCH VALUE

oklch(0.645 0.215 16.4)

Target Industries:Consumer SocialD2C E-commerceCreator EconomyDating & Lifestyle

Frequently Asked Questions About Coral Pink

What primary role should Coral Pink take in a digital interface?

Coral Pink (350° hue) merges the urgent magnetism of crimson with the playful optimism of bubblegum pink. It cuts through monotonous neutral interfaces instantly, commanding user clicks and drawing laser focus to promotions, likes, and highlights. In software applications, it functions best as an intentional accent, call-to-action anchor, or branded container highlight rather than an overwhelming full-bleed background.

How do I maintain WCAG AA accessibility when using Coral Pink?

Bright coral pink (#F43F5E) provides 4.0:1 contrast with white text. To guarantee AA compliance on small text (4.5:1), use Rose 600 (#E11D48) or pair with deep plum/black text. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.

How can I import Coral Pink into Tailwind CSS?

Use our Code Export Center above to copy the ready-made 11-step shade scale (50 to 950) directly into your Tailwind v4 @theme or v3 tailwind.config.js file.

Explore More

Related Design Color Wheels

View all wheels →

Aesthetic

#9D8DF1

Dreamy, Pinterest-inspired palette featuring Y2K pastels, cottagecore greens, and warm 70s vintage tones.

Soft Autumn

#B86B53

Muted, warm earth-toned palette from 12-season color analysis — featuring terracotta, olive, and warm taupe.

Deep Winter

#1E3A8A

High-contrast, jewel-toned palette from 12-season analysis — featuring obsidian navy, icy cobalt, and cool ruby.

Soft Summer

#9B8EB9

Cool, desaturated smoky pastel palette — featuring dusty lavender, slate denim, and sea mist sage.