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 · InteractiveTints & Shades Generator
Generate a full tint and shade scale from any color — 20 steps with HEX and SCSS export.
tints and shades, color scale, color paletteEffects & 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 Button Generator
Design beautiful buttons in seconds — 6 styles, custom colors, radius and padding, with copy-ready CSS.
button generator, css button, button design, hover buttonCSS 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 GlassGradient Text Generator
Make text pop with gradient fills and animation — tune angle and colors, copy the CSS instantly.
gradient text, text gradient, css text effectFree Logo Maker
Design a logo in minutes — free, no signup, no watermark. 40 symbols, 20 professional fonts, 20 curated palettes, 4 layouts. Export as SVG or PNG, free for commercial use.
logo maker, logo generator, free logo design, logo creatorFree Poster Maker
Design a poster in minutes — free, no signup, no watermark. 3 sizes, 14 backgrounds, 8 display fonts, upload your own image. Export as PNG or SVG, free for commercial use.
poster maker, poster creator, free poster maker, online poster design, poster generatorText 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 · ProportionSVG Wave Generator
Create smooth SVG wave dividers for your website — tune amplitude, wavelength and layers, copy the SVG.
svg wave, wave divider, section dividerTypography 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.