Kick color palette
SocialKick uses a vibrant neon green as its signature color, paired with deep dark backgrounds and muted gray tones for a modern streaming platform look. The palette emphasizes high contrast and digital energy, reflecting its focus on live streaming and interactive communities.
kick.comKick colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Kick Neon GreenPrimary83, 252, 25
- Kick CharcoalSecondary35, 39, 42
- Kick Deep BlackAccent27, 27, 27
Surfaces
Page, cards and dividers.- Kick Dark BackgroundBackground24, 26, 27
- Kick Panel GraySurface34, 35, 38
- Kick Border GrayBorder53, 55, 59
Text
Three tiers of copy.- Kick WhiteText255, 255, 255
- Kick Light GraySecondary text199, 199, 199
- Kick Muted GrayMuted text122, 122, 122
Semantic
Feedback and state colors.- Kick Neon GreenSuccess83, 252, 25
- Kick Warning YellowWarning255, 214, 0
- Kick Error RedError255, 70, 70
- Kick Info BlueInfo0, 178, 255
Use Kick's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
kick-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B2FF;
--error: #FF4646;
--accent: #1B1B1B;
--border: #35373B;
--primary: #53FC19;
--success: #53FC19;
--surface: #222326;
--warning: #FFD600;
--secondary: #23272A;
--text-muted: #7A7A7A;
--background: #181A1B;
--text-primary: #FFFFFF;
--text-secondary: #C7C7C7;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.5:1
Pass
Text on surface
Needs 4.5:1 for body text
15.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
10.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
9.3:1
Pass
Muted text on background
Needs 3:1 for large text
4.1:1
Pass
Muted text on surface
Needs 3:1 for large text
3.7:1
Pass
Kick gray, dark and neutral colors
Kick runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Kick Dark BackgroundBackground
- HEX
- RGB
- HSL
- Kick Panel GraySurface
- HEX
- RGB
- HSL
- Kick Border GrayBorder
- HEX
- RGB
- HSL
- Kick WhiteText
- HEX
- RGB
- HSL
- Kick Light GraySecondary text
- HEX
- RGB
- HSL
- Kick Muted GrayMuted text
- HEX
- RGB
- HSL
About Kick's colors
Kick's color system is built around a high-contrast neon green and dark backgrounds, creating a visually striking and energetic interface. The palette is optimized for digital screens and live content environments.
Primary neon green contrasts with deep blacks and grays.
Accent and surface tones provide depth and separation.
Semantic colors (yellow, red, blue) are reserved for alerts and statuses.
Psychology
The neon green conveys energy, innovation, and a sense of digital immediacy. Dark backgrounds reduce eye strain and focus attention on content.
Evolution
Kick's palette has remained consistent since launch, maintaining its signature neon green and dark UI. Minor adjustments to gray tones have improved readability and accessibility.
Where Kick uses each color
- Primary
Used for logo, primary buttons, and highlights throughout the Kick platform.
- Secondary
Forms the main navigation and sidebar backgrounds.
- Accent
Applied to headers, overlays, and modal backgrounds.
- Backgrounds
Used as the main app and site background.
- Text
White and light gray are used for primary and secondary text, ensuring readability on dark surfaces.
- Semantic
Yellow, red, and blue are used for notifications, errors, and informational messages respectively.
Kick color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Kick primary color hex code is #53FC19. This vibrant green is used for branding and key UI elements.
Kick Neon Green (#53FC19) has an RGB value of 83, 252, 25. This color is used for primary actions and highlights.
Kick uses #23272A (Kick Charcoal), #181A1B (Kick Dark Background), and #222326 (Kick Panel Gray) for its dark and neutral UI surfaces. These colors ensure high contrast with the neon green and white text.
Use #53FC19 for primary actions, branding, and highlights; dark tones for backgrounds and surfaces; and semantic colors for alerts. Always maintain sufficient contrast for accessibility.
The secondary color is Kick Charcoal, #23272A, and the accent is Kick Deep Black, #1B1B1B. Together with the primary they make up the three brand colors at the top of this page.
6 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Kick's colors consistently when it generates UI.
Make something in the spirit of Kick
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.