Design tools

Contrast, color, motion and icons. kodilo has 16 free Design tools, including WCAG Contrast Checker, px, rem & em Converter, Cubic Bezier Editor and Image Color Palette, and more. Every tool runs entirely in your browser, with no sign-up and no data sent to a server.

• WCAG Contrast CheckerCheck text and background contrast against WCAG AA and AAA.
• px, rem & em ConverterConvert px, rem, em, pt and percent, or a whole CSS snippet to rem.
• Cubic Bezier EditorShape a CSS easing curve with draggable handles and preview it.
• Image Color PaletteExtract the dominant colors of an image as HEX, RGB or HSL.
• Favicon GeneratorCreate favicon.ico, PNG sizes, Apple icon and a web manifest from a letter or an image.
• Color Shades GeneratorGenerate a Tailwind-style 50 to 950 shade scale from one color in OKLCH, with WCAG contrast for each shade and export as Tailwind config, CSS variables or a list.
• Color Blindness SimulatorRender your HTML or an image as people with protanopia, deuteranopia, tritanopia or achromatopsia see it.
• SVG Wave & Blob GeneratorGenerate SVG waves and blobs with sliders and a seed, then copy the SVG or a CSS background.
• Type Scale GeneratorModular type scale from a base size and ratio, exported as CSS, Tailwind or JSON.
• Font Pairing PreviewCurated Google Fonts heading and body pairs on a realistic article.
• Color Harmony GeneratorComplementary, analogous, triadic, tetradic and split palettes in OKLCH.
• OKLCH Color PickerPick colors in OKLCH, check sRGB and P3 gamuts, convert to hex, rgb, hsl and oklab.
• Design Tokens GeneratorColors, spacing, radii, shadows and type exported as CSS, Tailwind, DTCG JSON or SCSS.
• Glassmorphism GeneratorFrosted glass cards with backdrop blur, tint and border.
• Neumorphism GeneratorSoft UI shapes with paired light and dark shadows.
• SVG Path EditorEdit path data visually, convert absolute and relative, round and minify.