Pumpkin
#F97316
Color Picker
Web Safe Color
#FF6600(26 units different)RGB Values
CMYK Values
HSL Values
HSV Values
Color Harmonies
Explore different color harmonies based on your selected color. Click on any color to explore it further.
Complementary
Complementary colors are directly opposite each other on the color wheel. This creates a high-contrast, vibrant look that's perfect for creating emphasis.
Analogous
Analogous colors are next to each other on the color wheel. This creates a serene and comfortable design that's easy on the eyes.
Triadic
Triadic colors are three colors equally spaced around the color wheel. This creates a balanced and harmonious design with high visual contrast.
Tetradic
Tetradic colors form a rectangle on the color wheel. This rich color scheme offers plenty of possibilities for variation.
Contrast Checker
Test color combinations for WCAG accessibility compliance
Colors
Contrast Ratio
WCAG 2.1 Requirements
Text on Background
Text color on background color
Large Heading
This is how your regular text will look. The quick brown fox jumps over the lazy dog.
Here's some smaller text for additional content and details.
Background on Text
Background color on text color
Large Heading
This is how your regular text will look. The quick brown fox jumps over the lazy dog.
Here's some smaller text for additional content and details.
Insufficient Contrast
The current contrast ratio (2.80:1) doesn't meet WCAG AA standards. Consider adjusting your colors for better readability.
Design Guide
Best practices for using #F97316 in your designs
Color Harmony
High contrast, vibrant combinations
Harmonious, natural color combinations
Different shades and tints of the same hue
Color Properties
Recommended Usage
Primary Color
Use for main actions, headers, and key UI elements
Secondary Elements
Use for secondary actions and subtle highlights
Background
Use with reduced opacity for subtle backgrounds
Accessibility Guidelines
Color Blindness
Best Practices
- Don't rely on color alone to convey information
- Ensure sufficient contrast for text and interactive elements
- Test designs with color blindness simulators
- Include visual indicators beyond color (icons, patterns)
Fashion Color Combinations
Discover perfect color combinations for fashion design and styling
Monochromatic Outfit
Perfect for creating a sophisticated, cohesive look
Styling Tips
- • Mix different textures to add depth
- • Use varying shades for visual interest
- • Consider adding metallic accessories
Statement Contrast
Bold and eye-catching combinations
Styling Tips
- • Use the complementary color sparingly as an accent
- • Balance bold colors with neutral pieces
- • Consider the 60-30-10 rule for color distribution
Harmonious Blend
Soft, pleasing combinations that work well together
Styling Tips
- • Layer pieces in similar colors
- • Use the darkest color for bottom pieces
- • Add neutral accessories to ground the look
Neutral Pairing
Versatile combinations with neutral colors
Styling Tips
- • Use this color as a statement piece
- • Mix textures for added interest
- • Add metallic accessories to elevate the look
Seasonal Palette
Colors that work well for different seasons
Styling Tips
- • Adapt the palette based on the season
- • Consider fabric weights and textures
- • Use lighter tones for spring/summer, deeper for fall/winter
Fashion Design Guidelines
- • 60-30-10 Rule: Use your main color for 60% of the outfit, a secondary color for 30%, and an accent color for 10%
- • Texture Mixing: Combine different fabric textures to add depth to monochromatic looks
- • Seasonal Adaptation: Adjust color intensity based on the season - lighter for spring/summer, deeper for fall/winter
- • Accessorizing: Use metallic accessories (gold/silver) to complement any color palette
- • Pattern Mixing: When mixing patterns, keep one color consistent throughout the outfit
Color Blindness Simulation
Check how your selected color appears to people with different types of color blindness. This can help ensure your color choices are accessible to all users.
Normal Vision
Original Color
Protanopia
Red-Blind
Difficulty distinguishing between red and green colors
Deuteranopia
Green-Blind
Reduced sensitivity to green light
Tritanopia
Blue-Blind
Difficulty distinguishing between blue and yellow colors
Achromatopsia
Complete Color Blindness
Unable to see any colors (monochromatic vision)
Why This Matters
Approximately 8% of males and 0.5% of females experience some form of color blindness. When designing with colors, it's essential to ensure your choices are accessible to all users. Consider using patterns, shapes, or labels in addition to color to convey information.
Code Examples
Copy and paste code snippets in your preferred format
color: #F97316;
background-color: #F97316;
border-color: #F97316;$primary-color: #F97316;
$accent-color: #F97316;
$border-color: #F97316;// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#F97316',
},
},
},
}<div style="color: #F97316; background-color: #F97316; border-color: #F97316;">Content</div>Live Preview
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog