A bold, trend-led palette that channels short-form social energy with neon contrast and sharp dark grounding. The mix feels youthful and clickable without leaning into a literal TikTok clone, giving the platform its own recognizable edge.
A bold, trend-led palette that channels short-form social energy with neon contrast and sharp dark grounding. The mix feels youthful and clickable without leaning into a literal TikTok clone, giving the platform its own recognizable edge.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine electric cyan, vivid coral, and a sharp violet-pink edge to create an instantly energetic social-media identity. Together they feel camera-ready and fast-moving, with enough contrast to stay memorable across product,
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The main colors combine electric cyan, vivid coral, and a sharp violet-pink edge to create an instantly energetic social-media identity. Together they feel camera-ready and fast-moving, with enough contrast to stay memorable across product,
RolesLogo, Link, Btn Primary Bg
Signals motion, freshness, and app-level immediacy; ideal for the most visible brand touchpoints.
#00C2FF0, 194, 255194, 100, 50100, 24, 0, 0RolesBtn Secondary Bg, Headline
Adds social warmth and creator energy, keeping the brand expressive rather than purely tech-led.
#FF4D6D255, 77, 109349, 100, 650, 70, 57, 0RolesBtn Outlined Border, Btn Outlined Text
Brings a trend-forward digital accent that sharpens UI boundaries and reinforces the platform's bold personality.
#B026FF176, 38, 255278, 100, 5731, 85, 0, 0The support accents deepen the neon system with darker, quieter notes so the main colors can stay loud and readable. They extend the palette for interface states, illustration, and
RolesIcon, Border
Supports the cyan without competing with it, adding structure and clarity to UI details.
#00A3A30, 163, 163180, 100, 32100, 0, 0, 36RolesDivider, Outline
Balances the palette with a calmer electric tone that works well for subtle separators and non-primary emphasis.
#7A5CFF122, 92, 255251, 100, 6852, 64, 0, 0Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F4F6244, 244, 246240, 10, 961, 1, 0, 4RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#11111117, 17, 170, 0, 70, 0, 0, 93Copy palette values for design systems, websites, and client handoff.
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-electric-cyan: #00C2FF;
--color-pulse-coral: #FF4D6D;
--color-neon-violet: #B026FF;
--color-deep-teal: #00A3A3;
--color-soft-indigo: #7A5CFF;
--color-pure-white: #FFFFFF;
--color-cloud-white: #F4F4F6;
--color-near-black: #111111;
}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: #00C2FF;
--role-link: #00C2FF;
--role-btn-primary-bg: #00C2FF;
--role-btn-secondary-bg: #FF4D6D;
--role-headline: #FF4D6D;
--role-btn-outlined-border: #B026FF;
--role-btn-outlined-text: #B026FF;
--role-icon: #00A3A3;
--role-border: #00A3A3;
--role-divider: #7A5CFF;
--role-outline: #7A5CFF;
--role-bg-light: #FFFFFF;
--role-bg-dark: #111111;
--role-text: #111111;
--role-btn-primary-text: #111111;
--role-btn-secondary-text: #111111;
}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.{
"electric-cyan": "#00C2FF",
"pulse-coral": "#FF4D6D",
"neon-violet": "#B026FF",
"deep-teal": "#00A3A3",
"soft-indigo": "#7A5CFF",
"pure-white": "#FFFFFF",
"cloud-white": "#F4F4F6",
"near-black": "#111111"
}