GALAXY OF TOOLS

DESIGN SECTOR · 47 TOOLS

Free Color & Design Tools

Colour pickers, palettes and contrast, plus CSS generators for gradients, shadows, borders, buttons, flexbox, grid, animations and transforms. 47 free tools, no sign-up.

Colours & palettes12

Color PickerPick any colour precisely and copy it as HEX, RGB, HSL, HSV, CMYK, OKLCH or a CSS variable.Color & DesignColor ConverterConvert any colour between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab, OKLCH and app code.Color & DesignOG Image MakerDesign a 1200×630 Open Graph image with your title, logo and colours; download PNG/JPG and copy meta tags.Color & DesignColor Palette GeneratorBuild complementary, triadic, analogous and random palettes, then export CSS, Tailwind, JSON or PNG.Color & DesignColor Name FinderFind the closest named colour for any HEX, RGB or HSL code — CSS, Tailwind and Material names — or search by name.Color & DesignContrast CheckerCheck text and background colours against WCAG 2.2 and get a fix that passes.Color & DesignColor Shades GeneratorGenerate tints, shades and tones of any colour plus a Tailwind-style 50–950 scale built in OKLCH.Color & DesignColor Blindness SimulatorSee any image or colour pair as people with red-green, blue-yellow or total colour blindness do.Color & DesignColour Mixing CalculatorMix up to four colours by parts and see the result as screen light and as an estimated paint mix.Color & DesignPixel Art EditorDraw pixel art and sprites with layers, fill, lines, symmetry and retro palettes; export scaled PNG or SVG.Color & DesignRAL Colour ConverterConvert your own RAL list to HEX, RGB, CMYK and Lab, and find the nearest RAL for any colour.Color & DesignND Filter Exposure CalculatorNew shutter speed with an ND filter (stops, ND number or density), the filter you need, and an exposure timer.Color & Design

CSS generators22

Mockup GeneratorPut your screenshot or design on a phone, laptop, browser, poster, T-shirt, mug or box, tilt it and download a PNG.Color & DesignGradient GeneratorDesign linear, radial and conic gradients with draggable colour stops, copy the CSS or download a PNG.Color & DesignSVG EditorOpen or paste an SVG, click shapes to edit fill, stroke and attributes, move or resize them, optimise, export.Color & DesignBorder Radius GeneratorRound corners visually, or drag 8 handles to make organic blob shapes — then copy the CSS.Color & DesignBox Shadow GeneratorDesign layered CSS box shadows visually and copy clean CSS or a Tailwind class.Color & DesignCSS Button GeneratorDesign a button with hover, focus, active and disabled states, check accessibility live and copy HTML + CSS.Color & DesignText Shadow GeneratorLayer CSS text shadows for neon glows, retro 3D, outlines and emboss — with a live preview.Color & DesignCSS Flexbox GeneratorBuild flex layouts visually, see the main and cross axis, then copy clean CSS, HTML or Tailwind classes.Color & DesignFont Pairing PreviewerPreview heading and body font pairs in real layouts, check their contrast, and copy the CSS and import code.Color & DesignCSS Grid GeneratorDrag to draw grid areas, size tracks with fr, minmax() and auto-fit, then copy CSS, HTML or Tailwind classes.Color & DesignCSS Border GeneratorSet border width, style and colour per side, add outlines and gradient borders, and copy the shortest CSS.Color & DesignType Scale GeneratorBuild a modular type scale from a base size and ratio, static or fluid clamp(), for CSS, SCSS or Tailwind.Color & DesignMesh Gradient GeneratorDrag colour points to blend a mesh gradient, add grain, then copy layered CSS or export a PNG at any size.Color & DesignCSS Pattern GeneratorStripes, dots, grids, zigzags, hexagons and more from pure CSS gradients — copy the CSS or save an SVG tile.Color & DesignCSS Transform GeneratorTranslate, rotate, scale and skew in 2D or 3D, reorder the functions, drag the origin and get matrix() output.Color & DesignGlassmorphism GeneratorDesign frosted-glass cards with backdrop-filter and copy CSS with a built-in fallback.Color & DesignASCII Art GeneratorTurn text into ASCII banners in four fonts, or convert any image into ASCII art with colour HTML export.Color & DesignCSS Animation GeneratorBuild @keyframes on a timeline, shape the easing curve, scrub the live preview and copy the animation CSS.Color & DesignSVG Sprite GeneratorDrop SVG icons to build one <symbol> sprite with use snippets, a demo page, or a CSS data-URI sprite.Color & DesignCSS Clip Path MakerDrag points to shape a CSS clip-path polygon, or edit circle, ellipse and inset shapes, and copy the code.Color & DesignTime-Lapse CalculatorPlan a time-lapse over hours or days: interval, number of photos, clip length, card space and batteries.Color & DesignSVG to DXF ConverterConvert SVG artwork to a DXF file for laser cutters, vinyl cutters, CNC and CAD, with layers by colour. No upload.Color & Design

Sizes, ratios & units13

Aspect Ratio CalculatorSimplify any width × height to a ratio, or find the missing width or height for a given ratio.Color & DesignPX to REM ConverterConvert px to rem and back with any root font size, bulk-convert a CSS snippet, or read the 1–96 px table.Color & DesignLine Height CalculatorIdeal line height in unitless, px, % and rem from font size and line length, with CSS and live preview.Color & DesignPrint Bleed CalculatorDocument size with bleed, safe area and pixel size for cards, flyers, posters and KDP book interiors.Color & DesignExposure Value CalculatorFind EV, shutter speed, aperture or ISO from the other settings, with equivalent exposures and Sunny 16.Color & DesignBook Spine Width CalculatorSpine width from page count and paper, plus full cover size with bleed for print on demand.Color & DesignDepth of Field CalculatorNear and far limits of sharp focus, total depth of field and background blur size for any lens and sensor.Color & DesignGolden Ratio CalculatorSplit any length by φ, get golden layouts and type scales as CSS, and overlay a phi grid on a photo.Color & DesignCrop Factor CalculatorCrop factor of any sensor plus full-frame equivalent focal length, aperture and ISO.Color & DesignCamera FOV CalculatorAngle of view and scene size from focal length and sensor size, plus a CCTV lens finder and focal length from a photo.Color & DesignHyperfocal Distance CalculatorHyperfocal distance, near limit and depth of field by aperture and distance, with a printable chart.Color & DesignGSM CalculatorGSM from sample weight and size, woven fabric from ends and picks, and GSM to lb paper.Color & DesignStar Trail CalculatorTrail arc, length in pixels, frames to stack, and 500 rule and NPF exposure limits for star photos.Color & Design

Color tools and CSS generators for designers

Good design is built from small, exact values: a brand colour in HEX, a tint that is 20% lighter, a shadow that looks soft rather than muddy, a font size in rem that scales with the reader’s settings. These free colour and design tools give you those values quickly. Use the color picker to choose a shade visually, the color converter to move between HEX, RGB and HSL, and the palette generator to build a harmonious scheme from one starting colour.

For front-end work, CSS generators write the code for you: gradients, box shadows, border radius, text shadows and the frosted glassmorphism effect, each with a live preview so you can tweak by eye and copy clean CSS. Helpers such as the px to rem converter and the aspect ratio calculator take care of the arithmetic of responsive layouts. The generators output standard CSS that works in current browsers, so you can paste it straight into a stylesheet, a component or a design system.

Accessibility is part of the toolkit, not an afterthought. The contrast checker tests text and background pairs against WCAG guidelines, and the color blindness simulator shows how a design may look to people with common colour vision deficiencies. Everything runs in your browser, so unreleased brand work stays private. Web designers, developers, marketers making social graphics, students learning design and anyone choosing paint for a room will find something useful here.

HEX, RGB or HSL: which colour format should you use?

  • HEX, such as #1E90FF, is compact and the most common format in brand guidelines, design apps and CSS.
  • RGB, such as rgb(30 144 255), describes the red, green and blue light on a screen. Add an alpha value when you need transparency.
  • HSL, such as hsl(210 100% 56%), describes hue, saturation and lightness, which makes it easy to create lighter, darker or muted versions of a colour by changing one number.
  • CMYK is for print. Screen colours do not map perfectly onto ink, so ask your printer for a proof when colour accuracy matters.

Design tips that save revisions

  • Check contrast early. Fixing colours after launch is much harder than choosing accessible pairs at the start.
  • Build a scale, not a single colour. The color shades generator creates tints and shades so buttons, borders and hover states stay in the same family.
  • Do not rely on colour alone to carry meaning. Pair red and green states with an icon or a label so they work for colour-blind users.
  • Use rem for font sizes so text respects the reader’s browser settings; 1rem is 16px by default.
  • To pull a colour from a logo or photo, use the color picker from image in our image tools, which reads any pixel of an uploaded picture.

Color & Design: frequently asked questions

How do I convert HEX to RGB?

Split the six digits into three pairs and convert each pair from hexadecimal to decimal, so #FF8800 becomes rgb(255, 136, 0). The color converter does this instantly in both directions.

What contrast ratio do I need for accessible text?

Under WCAG level AA, normal text needs at least 4.5:1 and large text (about 24px, or 18.66px bold) needs 3:1. Level AAA raises those to 7:1 and 4.5:1.

What is glassmorphism?

It is a UI style that imitates frosted glass: a semi-transparent panel with a background blur, a subtle border and a soft shadow. In CSS it relies on the backdrop-filter property, which current major browsers support.

How do I convert px to rem?

Divide the pixel value by the root font size, which is usually 16px. So 24px is 1.5rem and 14px is 0.875rem.

What is a complementary colour?

It is the colour directly opposite on the colour wheel, 180° away in hue, as with blue and orange. Complementary pairs give strong contrast, while analogous or triadic palettes feel calmer or more balanced.

How can I find the name of a colour?

Paste its HEX or RGB value into the color name finder, which matches it to the closest named colour. That helps when writing alt text, product descriptions or design notes.