Kitset My Kitset Topics All tools
Subject topic

Design & Color

Create colors, CSS effects, layouts and accessible designs.

22 tools in this topic

Explore color, layout and visual styling with practical tools for designers and developers. Build palettes and gradients, check contrast, generate CSS effects and calculate sizes for screens and print.

Other tools

1
Timelapse Duration CalculatorPlan frame count, playback length and source-image storage.

Other tools

1
Quilt Block Layout CalculatorCalculate a block grid, total block count and square cut size.

Developer Tools

5
CSS Grid GeneratorGenerate responsive CSS grid code.Flexbox GeneratorGenerate flexbox layout CSS.CSS Filter GeneratorBuild CSS filter effects visually.Line Height CalculatorCalculate readable CSS line height.CSS Triangle GeneratorGenerate border-based CSS triangles.

Generators

1
Random Color GeneratorGenerate a random color with hex and RGB.

Image Tools

7
Pixels to Print Size CalculatorConvert image pixels into print size.Print Size to Pixels CalculatorFind pixel dimensions for a print size.DPI CalculatorCalculate effective DPI from pixels and print width.Image Resize Percentage CalculatorCalculate image scaling percentage.Bleed Size CalculatorCalculate print document size with bleed.Book Spine Width CalculatorEstimate paperback spine width.Image Color PickerPick HEX and RGB colors from an image.

Other tools

7
HEX to RGB ConverterConvert a hex color code to RGB.Color Contrast CheckerCheck WCAG contrast between text and background.Color Shades GeneratorGenerate lighter tints and darker shades of any color.Color MixerBlend two colors and get the result.HEX to HSL ConverterConvert a hex color code to HSL.Complementary Color FinderFind the complementary and matching colors.RGB to HSL ConverterConvert RGB values to HSL.