Hero Background

ColorFont

Simplify Your Web Development Workflow

All-in-One Toolbox for Inspecting Colors, Fonts and More

Get ColorFont for ChromeChrome Logo
Join 10,000+ other web developers and designers.
★ 3.7 (7) on the Chrome Web Store

Features

Streamline your workflow by combining multiple extensions into one

Retrieve colors and build color systems
Retrieve colors and build color systems
Check accessibility for each page
Check accessibility for each page
Export type systems to Code
Export type systems to Code
Create type systems
Create type systems
Get ColorFont for ChromeChrome Logo
Join 10,000+ other web developers and designers.
★ 3.7 (7) on the Chrome Web Store

Free Tools

CSS Gradient Generator

Free CSS gradient generator. Build linear, radial and conic gradients, set the angle and color stops, start from a preset, and copy the CSS.

CSS Box Shadow Generator

Free CSS box shadow generator. Stack layered and inset shadows, set offset, blur, spread and color, preview live, and copy the CSS.

Color Shades Generator

Free color shades generator. Turn one color into 11 tints and shades (50–950) and copy them as CSS, CSS variables, Tailwind or SwiftUI.

Radial Gradient Generator

Free CSS radial gradient generator. Choose a circle or an ellipse, move the center, add color stops, and copy the radial-gradient() CSS.

Video Thumbnail

Built For Developers

Go Pro to unlock more features

Find most common colors in an image
Find most common colors in an image
Check accessibility for each page
Check accessibility for each page
Inspect image info and alt tags
Inspect image info and alt tags
Check for errors that might hurt your SEO ranking
Check for errors that might hurt your SEO ranking
Highlight common elements on a page
Highlight common elements on a page
Check meta tags and open graph information
Check meta tags and open graph information
Lines Image
Everything you need for better web development
+ developer tools
Download or Copy an SVG with a click
Download or Copy an SVG with a click
Convert image formats between PNG, JPG, and WebP
Convert image formats between PNG, JPG, and WebP
Inspect headers on a page
Inspect headers on a page

Pricing

Basic

Free

forever

Install on Chrome

For those getting started and learning ColorFont

  • Color Selector
  • Color System Export
  • Font Selector
  • Manual Color/Font Addition
  • Basic Palette Generation
  • Color/Font Collections
  • Basic Accessibility Checker

🚀 Special Beta Pricing - Save 56%

Pro

$25 $11

billed once yearly

Log in to Manage Your Account

For solo shops wanting all features.

  • Everything in Basic
  • Website Color Scanning
  • Image Color Extraction
  • Advanced Palette Generation
  • Page Accessibility Analysis
  • SEO Analysis & Reports
  • Div/Element Highlighting
  • Image Converter (PNG/JPG/WebP)
  • More Features Coming Soon