Color Palette Builder | CyberWV Tools

◆ Getting Started

Enter 1-3 hex colors in the input fields at the top and click Generate Palettes to create color harmonies. You can also click the color preview box to open a color picker.

▣ Custom Palette

Add colors: Click any color swatch from the generated palettes to add it to your custom palette
Change shades: Click the shade strip below each color to select a different shade
Reorder: Drag and drop colors to rearrange them
Copy hex: Click the hex value to copy it to clipboard
Remove: Hover over a color and click the × button
Fullscreen: Click the ⛶ button to expand the palette to fill the browser window

◉ Palette Analysis

Once you have colors in your palette, scroll down to see:

Color Wheel: Visual representation of where your colors sit on the color wheel
Color Names: Human-readable names for each color
Temperature: Whether colors are warm, cool, or neutral
Mood: Automatic analysis of your palette's feel (vibrant, muted, earthy, etc.)

🎨 Mockup Preview

Assign your palette colors to roles (Primary, Secondary, Accent, Background, Text) and preview them on:

Components: Buttons, badges, cards, and text samples
Login Page: A complete sign-in form mockup
Blog/Homepage: A full page layout with navigation, hero, and cards
Pricing Cards: A three-tier pricing page with featured plan

📁 Saving & Exporting

Save: Click the Save button to store your palette locally in your browser
Export JSON: Download all saved palettes as a JSON file for backup
Import JSON: Restore palettes from a previously exported JSON file
Export Image: Download your current palette as a PNG or JPG image
Copy formats: Use the HEX, RGB, CSS buttons to copy your palette in different formats

⌨ Keyboard Shortcuts

Ctrl+Z Undo Ctrl+Shift+Z Redo Ctrl+Y Redo Esc Close modals

★ Premium Presets

Load curated, industry-themed color palettes with a single click:

Each preset includes 5 colors (primary, secondary, accent, background, text)
Colors are automatically assigned to mockup roles
Supports undo — you can revert to your previous palette

📦 Export Pack

Export your palette in developer-ready formats:

CSS Variables: Copy-paste :root block with custom properties + RGB values
Tailwind Config: Ready-to-use tailwind.config.js color config
Brand Sheet: Download a professional PNG with swatches, color values, and a WCAG contrast matrix

🌈 Gradient Generator

Create smooth color gradients between two colors:

Pick colors: Enter start and end colors manually or use the color pickers
Gradient type: Choose between linear or radial gradients
Steps: Control how many intermediate colors are generated (3-20)
Angle: Set the gradient direction (for linear gradients)
Click steps: Click any gradient step to add it to your palette
Shift+click: Add a gradient step color to your palette
Add all: Add all gradient steps to your palette at once
Use palette: Use your palette's first and last colors as gradient endpoints

◇ Color Converter

Enter any hex color to see it converted to RGB, HSL, CMYK, Pantone (nearest match), and more. Click any value to copy it.