Color Studio
Palettes, gradients, wheels, and every way to find the perfect color.
AI Palette Generator
Describe a mood and get matching palettes — powered by a real neural network running entirely in your browser. No servers, no waiting, no data leaves your device.
AI · NeuralAI Style Guide
Describe your brand and get a complete design system — palette, font pairing, typography scale, spacing, radius and shadows — matched by the neural network and assembled into one copy-ready CSS block.
AI · Design SystemColor Converter
Convert between HEX, RGB, HSL, CMYK, and OKLCH with instant bidirectional conversion.
Converter · All formatsColor Harmonies
Generate complementary, triadic, analogous, and split-complementary palettes from any base color. Click any swatch to copy its hex code.
Color · TheoryAI Color Namer
Enter any hex color and find its closest names — CSS standard colors, Chinese traditional colors, Japanese wagairo, and 12 more cultures. Perceptual color science finds the true nearest match, and the AI model suggests related palette themes.
AI · Color ScienceColor Wheel
Interactive color wheel to explore hues, saturations, and color relationships. Click to select and lock colors.
Interactive · VisualGradient Generator
Design beautiful linear and radial gradients with real-time Canvas preview. Copy CSS code instantly.
Gradient · CSS exportGradient Presets
Browse and copy 15 beautiful gradient presets.
Presets · One-clickImage Palette
Extract beautiful color palettes from any image using smart color quantization.
Extraction · SmartPalette Generator
Create harmonious color schemes with monochromatic, complementary, analogous, and triadic modes. Real-time preview with CSS export.
Color · InteractiveEffects & Depth
Shadows, glass, and radius — the subtle details that make UI feel real.
Blob Maker
Generate smooth organic blob shapes for backgrounds, avatars, and section dividers. Randomize with one click, fine-tune the curvature, and copy the border-radius or SVG code.
CSS · OrganicBorder Radius
Visual border-radius editor with real-time preview. Copy CSS code with individual corner control.
CSS · Visual editorBox Shadow
Interactive box-shadow builder with multi-layering, real-time Canvas preview, and CSS output.
CSS · LayeredCSS Filter Generator
Build visual effects with CSS filter() — blur, brightness, contrast, hue-rotate, sepia and more. Live preview on a sample image, copy the complete filter chain instantly.
CSS · Image FXGlassmorphism Generator
Create frosted glass cards with backdrop blur, transparency, and subtle borders. Real-time preview and copy-paste CSS.
UI · Frosted GlassText Shadow Generator
Design layered text shadows with real-time preview. Adjust offset, blur, color, and opacity — copy the CSS instantly.
CSS · TypographyPractical Toolkit
Checks, conversions, and systems that keep your designs accessible and consistent.
AI CSS Snippets
Describe the effect you want — a glowing button, a loading spinner, a glass card — and the neural network finds the matching CSS snippet. See it rendered live, copy the ready-to-use code.
AI · Code LibraryColor Blindness Simulator
Simulate how colors appear to color blind users.
Accessibility · SimulationContrast Checker
Verify WCAG AA/AAA compliance for text and background colors. Get instant accessibility ratings.
Accessibility · AA/AAACubic Bezier Generator
Design custom CSS easing curves with live preview and animation. Drag control points, pick from presets, and copy the cubic-bezier() function instantly.
CSS · MotionPX to REM Converter
Convert pixels to REM and back instantly, with adjustable base font size and a full conversion table. Essential for accessible, scalable CSS.
CSS · UnitsCSS Transform Generator
Visualize and generate CSS transforms — rotate, scale, translate, and skew with a live interactive preview. Copy the complete transform property instantly.
CSS · AnimationUI Color System
Generate complete design token palettes from a single seed color. Export to Tailwind, CSS, or SCSS.
Design tokens · TailwindLayout & Grid
Grids and proportions — the structural backbone of every interface.
Aspect Ratio Calculator
Calculate and scale any aspect ratio — 16:9, 4:3, 1:1, 9:16 and custom. Resize dimensions while preserving proportions, with common resolution presets.
Utility · RatioCSS Grid Generator
Visually create CSS Grid layouts with real-time preview.
CSS · Visual EditorGolden Ratio Calculator
Calculate golden ratio dimensions (1:1.618) for layouts, typography, and logos. Get both larger and smaller golden values instantly, with visual preview.
Layout · ProportionTypography Atelier
Font pairing and scales — the voice of your design.
AI Font Pairing
Describe your project and get professional Google Font pairings matched by a real neural network running in your browser. See them rendered live, copy the ready-to-use CSS.
AI · FontsClamp Calculator
Generate fluid typography with CSS clamp(). Set min, preferred, and max sizes — get the perfect clamp() formula and a visual scale preview.
CSS · Fluid TypeFont Pairing
Discover harmonious font pairings for headings and body text from curated collections.
Typography · 300+ fontsTypography Scale Generator
Generate a harmonious modular type scale with golden ratio, major third, and other classic ratios. Preview sizes visually and copy the full CSS.
Typography · Scale14 Languages
Every tool, every label, every guide — fully translated.
Accessibility First
Every palette includes WCAG contrast scores. Design inclusively from the start.
Dev-Friendly Export
CSS, Tailwind, SCSS, JSON — copy the format your project needs.