What it does: Select colors visually or by hex code with instant format conversion.

How to use:

1. Click the color picker to open visual selection
2. Or type hex code directly (e.g., #FF5733)
3. Click any color value to copy to clipboard
4. All formats (HEX, RGB, HSL) update automatically

What it does: Create CSS linear gradients with custom colors and directions.

How to use:

1. Choose start and end colors using color pickers
2. Select direction from 8 options (horizontal, vertical, diagonal)
3. Preview updates in real-time
4. Click "Copy CSS Code" for ready-to-use CSS

What it does: Generate 5-color harmonious palettes based on color theory.

Palette Types:

• Complementary: Opposite colors on color wheel
• Analogous: Adjacent colors for harmony
• Triadic: Three evenly spaced colors
• Monochromatic: Variations of single hue
• Tetradic: Four colors in rectangle pattern

How to use:

1. Choose base color with color picker
2. Select palette type from dropdown
3. Click "Generate Palette" for new combinations
4. Click any color in palette to copy hex code
5. Use "Export Palette" to save as text file

What it does: Blend two colors together with adjustable mixing ratio.

How to use:

1. Select first color in left picker
2. Select second color in right picker
3. Adjust mix ratio with slider (0-100%)
4. View blended result with color values
5. Click result values to copy to clipboard

What it does: Check color contrast ratios for accessibility compliance (WCAG standards).

WCAG Standards:

• AAA (7:1 ratio): ✅ Best accessibility for all text
• AA Normal (4.5:1): ✅ Good for normal text
• AA Large (3:1): ⚠️ Acceptable for large text only
• Below 3:1: ❌ Fails accessibility standards

How to use:

1. Choose text color with first picker
2. Choose background color with second picker
3. View live preview of text on background
4. Check contrast ratio and WCAG compliance level
5. Adjust colors until you achieve desired accessibility level

What it does: Simulate how colors appear to people with different types of color blindness.

Vision Types:

• Normal Vision: Standard color perception
• Protanopia: Red-blind (1% of males)
• Deuteranopia: Green-blind (1% of males)
• Tritanopia: Blue-blind (very rare)
• Achromatopsia: Complete color blindness (monochrome)

How to use:

1. Select test color with color picker
2. Choose vision type from dropdown
3. View simulated color appearance
4. Check color values for the simulated result
5. Test your designs for inclusive accessibility