colorsandfonts
Blog

Color & typography tools for web developers & digital designers

Color tools
Monochrome Palette Monochrome Palette Create a monochromatic palette Color palettes Color palettes Curated palettes Color gradients Color gradients Curated gradients Gradient Maker Gradient Maker Create gradients Color converter Color converter Converet any color code to another Contrast Checker Contrast Checker Check a color contrast Color system generator Color system generator Create a color system Color names Color names Find the name & codes Tailwind CSS to PostCSS Tailwind CSS to PostCSS Tailwind color object to PostCSS OKLCH color picker OKLCH color picker Create a OKLCH color RGB color picker RGB color picker Create a RGB color RGBA color picker RGBA color picker Create a RGBA color Hex color picker Hex color picker Create a HEX color HSL color picker HSL color picker Create a HSL color HSLA color picker HSLA color picker Create a HSLA color LAB color picker LAB color picker Create a LAB color
Color systems
Unwrapped Unwrapped Color system Untitled UI Untitled UI Color system Material Material Color system Primer Primer Color system Uber Uber Color system Atlassian Atlassian Color system Stripe Stripe Color system Ant Ant Color system Tailwind CSS Tailwind CSS Color system Bootstrap Bootstrap Color system Adobe Adobe Color wheel Safe Colors Safe Colors All web safe colors
Typography tools
Local font previewer Local font previewer Preview a local fonts Type Scale Type Scale Get scales and code Font pairings Font pairings Google Fonts paired Google Fonts Google Fonts Find Google Fonts Glyphs Glyphs A bunch of glyphs CSS Fontface CSS Fontface Generate the CSS for a fonts Capitalize and Decapitalize text Capitalize and Decapitalize text Capitalize and Decapitalize text Placeholder text-generator Placeholder text-generator Generate any ipsum text
Utilities
Clip Path Maker Clip Path Maker Grab the css for clip paths Design Token Generator Design Token Generator Generate design tokens in PostCSS, SASS and JSON Box Generator Box Generator Generate a CSS box shadow and get the code for it.
Astro
Tailwind CSS

Lexington Themes

Free and premium multipage themes & UI Kits For freelancers, developers, businesses, and personal use. Beautifully crafted with Astro.js, and Tailwind CSS

See all templates →
lexington
Alpine JS
Tailwind CSS

Oxbow UI

Premium components, elements and layouts For freelancers, developers, businesses, and personal use. Beautifully crafted with Tailwind CSS and Alpine JS

Browse components →
windstatic