Hot Pink#FF4F8B
Electric Violet#7A3FF2
Aqua Teal#19C6B3
Apricot#FFB347
Coral#FF6F61
Palette direction

Kpop Inspired Entertainment Color Palette

This KPop-inspired palette pairs vivid idol-stage energy with polished editorial contrast, so it feels both high-impact and brand-ready. The main colors create a recognizable pop system that can flex across campaigns, fan communities, and digital experiences without losing its performance-driven edge.

ComplementaryCreativeKPopvibrantidolperformance
palette-preview.example
Creative color direction

Kpop Inspired Entertainment Color Palette

This KPop-inspired palette pairs vivid idol-stage energy with polished editorial contrast, so it feels both high-impact and brand-ready. The main colors create a recognizable pop system that can flex across campaigns, fan communities, and digital experiences without losing its performance-driven edge.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Charcoal #141414on Aqua Teal #19C6B38.6:1 Excellent
Logo Charcoal #141414on Hot Pink #FF4F8B5.9:1 Strong
Logo White #FFFFFFon Electric Violet #7A3FF25.5:1 Strong
Logo Charcoal #141414on White #FFFFFF18.4:1 Excellent
Icon color
BackgroundHot Pink#FF4F8BTextCharcoal#141414
Primary Button5.92:1
AA

Best for the main action users should notice first.

BackgroundElectric Violet#7A3FF2TextWhite#FFFFFF
Secondary Button5.50:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextAqua Teal#19C6B3
Outlined Button2.15:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextAqua Teal#19C6B3
Text Button2.15:1
Low

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsComplementary color relationship
9:41Kpop Inspired Entertainment Color Palette Color role balance
Complementary system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CKpop Inspired Entertainment Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors form a triadic system that feels energetic and stage-like, echoing the saturated visual language of KPop without relying on one-note pink or blue tropes. Together they create strong recognition across logos, headlines, and calls to action.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Hot Pink #FF4F8B
HeadlineUsed for main titles and key messages.Electric Violet #7A3FF2
LinkUsed for links and interactive text.Aqua Teal #19C6B3

Buttons

Primary Button
BackgroundHot Pink #FF4F8B
TextCharcoal #141414
Secondary Button
BackgroundElectric Violet #7A3FF2
TextWhite #FFFFFF
Outlined Button
BackgroundAqua Teal #19C6B3
TextAqua Teal #19C6B3

Interface

TextDefault readable body text.Charcoal #141414
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Charcoal #141414
IconSmall interface icons and marks.Apricot #FFB347
BorderCards, inputs, and component borders.Apricot #FFB347
DividerSubtle separators between content.Coral #FF6F61
OutlineFocus rings and emphasis outlines.Coral #FF6F61

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors form a triadic system that feels energetic and stage-like, echoing the saturated visual language of KPop without relying on one-note pink or blue tropes. Together they create strong recognition across logos, headlines, and calls to action.

PrimaryHot Pink

RolesLogo, Btn Primary Bg

Hot Pink delivers the high-voltage pop and fan-centric excitement that makes the brand feel instantly alive.

HEX#FF4F8B
RGB255, 79, 139
HSL340, 100, 65
CMYK0, 69, 45, 0
SecondaryElectric Violet

RolesHeadline, Btn Secondary Bg

Electric Violet adds a sleek performance-night mood and gives the system a more premium, futuristic edge.

HEX#7A3FF2
RGB122, 63, 242
HSL260, 87, 60
CMYK50, 74, 0, 5
TertiaryAqua Teal

RolesLink, Btn Outlined Border, Btn Outlined Text

Aqua Teal brings a fresh digital accent that keeps the palette dynamic and readable across interactive elements.

HEX#19C6B3
RGB25, 198, 179
HSL173, 78, 44
CMYK87, 0, 10, 22

Support Colors

The support colors extend the pop energy with controlled contrast, adding shine and warmth without competing with the main trio. They help the palette feel more versatile for merch, posters, and interface accents while staying subordinate.

Apricot

RolesIcon, Border

Apricot softens the intensity with a warm highlight that echoes stage lighting and complements the brighter main colors.

HEX#FFB347
RGB255, 179, 71
HSL35, 100, 64
CMYK0, 30, 72, 0
Coral

RolesDivider, Outline

Coral adds a lively transitional tone that bridges pink and violet while keeping secondary UI details energetic.

HEX#FF6F61
RGB255, 111, 97
HSL5, 100, 69
CMYK0, 56, 62, 0

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory
HEX#F4F1EA
RGB244, 241, 234
HSL42, 31, 94
CMYK0, 1, 4, 4
Charcoal

RolesBg Dark, Text, Btn Primary Text

HEX#141414
RGB20, 20, 20
HSL0, 0, 8
CMYK0, 0, 0, 92

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
:root {
  --color-hot-pink: #FF4F8B;
  --color-electric-violet: #7A3FF2;
  --color-aqua-teal: #19C6B3;
  --color-apricot: #FFB347;
  --color-coral: #FF6F61;
  --color-white: #FFFFFF;
  --color-ivory: #F4F1EA;
  --color-charcoal: #141414;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
:root {
  --role-logo: #FF4F8B;
  --role-btn-primary-bg: #FF4F8B;
  --role-headline: #7A3FF2;
  --role-btn-secondary-bg: #7A3FF2;
  --role-link: #19C6B3;
  --role-btn-outlined-border: #19C6B3;
  --role-btn-outlined-text: #19C6B3;
  --role-icon: #FFB347;
  --role-border: #FFB347;
  --role-divider: #FF6F61;
  --role-outline: #FF6F61;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #141414;
  --role-text: #141414;
  --role-btn-primary-text: #141414;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "hot-pink": "#FF4F8B",
    "electric-violet": "#7A3FF2",
    "aqua-teal": "#19C6B3",
    "apricot": "#FFB347",
    "coral": "#FF6F61",
    "white": "#FFFFFF",
    "ivory": "#F4F1EA",
    "charcoal": "#141414"
}
Press Space to load new palette