SocialManager

Color tools for
every idea.

Color tools

Press the spacebar to generate color palettes!

Drag colors to reorder · Lock favorites · Click HEX to edit · Spacebar generates a new palette.

LIVE PREVIEW

See your palette in a real interface

Palette colors map automatically to background, text, primary, secondary and accent roles.

Sample link
Example Card

Judge hierarchy, contrast and visual balance before exporting.

Accent label

Image picker

Extract beautiful palettes from your photos.

Choose an imageUpload JPG, PNG or WebP to extract a palette.
GRADIENT GENERATOR

Build CSS gradients


  
Tailwind Colors
Create, preview and export your Tailwind CSS palette.
Primary card
Preview text, surface and action colors together.
Categories
Buttons · icons · badges · active states
Pricing plan
$99 per month
Newsletter
Schedule
9:15 Weekly Team Sync
4:00 Client Pitch Rehearsal
Button states
 

  
Color Contrast
Checker
Calculate the contrast ratio of text and background colors.
Readable text matters.
Preview normal and large text against your selected background.
Color vision preview
Normal
Protanopia
Deuteranopia
Tritanopia


  
INTERACTIVE COLOR WHEEL
Build harmonies visually
Drag the point around the wheel to change hue. Move toward the center for lower saturation.

  
LOCAL PALETTE LIBRARY
My Palettes
Saved in this browser. No account or external API is required.
Recently used colors


  
Trending Color Palettes
Browse, search and use curated color palettes.
0 palettesClick a color to copy its HEX

  
PROFESSIONAL COLOR WORKSPACE
Color Projects
Organize palettes and brand roles into projects, map color usage, test components and accessibility, preview responsive layouts, and keep local version history.
Color Usage Map
Assign your project colors to common design roles.
Project
COLOR SYSTEM
Preview your project palette.
Test hierarchy and visual balance at different viewport sizes.
Card One
Surface and border colors.
Card Two
Accent and text colors.
UI Component Lab
Success message
Warning message
Error message
Example Card
Reusable component preview.
Palette Accessibility Matrix
WCAG contrast ratios for every color pair. AA normal text requires 4.5:1; large text requires 3:1.
Version History

  
BRAND & DESIGN SYSTEM
Brand Color Kit
Assign semantic roles, generate light/dark themes, preview UI components, and export production-ready design tokens.
Brand
NEW
Build a consistent visual system.
Preview semantic colors across real interface components before exporting.
Surface card
Body text and borders update automatically.
Status colors
Success Warning Error
Design Tokens
Saved Brand Kits


  
Palette Visualizer
Preview your colors on real designs for a better visual understanding.
Theme Source
Smart Replace Color
→
Generated UI States
Production Preview
Color Manager
DESIGN SYSTEM
Production-ready theme preview
Check buttons, surfaces, forms, status colors and hierarchy together.
Product card
Surface, text and border roles.
Learn more
Form
SuccessWarningError
Palette Compare
Capture up to four palette snapshots and compare their visual balance side-by-side.
Production Export

  
Palette Export

 




	
                
                	Scroll to Top