Interactive CSS Color Wheel

An interactive visualization of CSS named colors using React and D3.js. This application displays all CSS named colors in a customizable pie chart format, allowing users to explore color relationships and properties.

Features

• Interactive Color Wheel: Hover over color segments to see detailed information
• Multiple Sorting Options: Sort colors by hue, lightness, saturation, or alphabetically
• Customizable Appearance: Adjust inner and outer radius to create different wheel styles
• Detailed Color Information: View hex, RGB, HSL values and luminance for each color
• Color Statistics: See aggregate statistics about the color palette
• Responsive Design: Works on desktop and mobile devices

Color Sorting Options

• Original Order: Colors as they appear in the CSS specification
• Hue: Colors sorted by their hue value (0-360°)
• Lightness: Colors sorted from dark to light
• Saturation: Colors sorted from gray to vibrant
• Alphabetical: Colors sorted by name

Controls

• Sort by: Choose how colors are arranged around the wheel
• Inner Radius: Adjust to create a donut chart effect (0 = full pie)
• Outer Radius: Change the overall size of the color wheel

Color Information

Hover over any color segment to see:

• Color name
• Hex value
• RGB values
• HSL values
• Calculated luminance

Statistics

The app displays aggregate statistics including:

• Total number of colors
• Average hue, saturation, and lightness values

Technology Stack

• React 18: For component-based UI
• D3.js 7: For data processing and SVG generation
• CSS3: For modern styling and responsive design
• ES6+: Modern JavaScript features

Data Source

Color data is loaded from a CSV file containing all CSS named colors with their corresponding hex values.