Générer des nuances de couleurs à partir d'une seule couleur de base

Ajustez la couleur de base à l'aide du panneau d'outils à droite pour modifier la gamme de nuances. Utilisez le bouton Modifier pour modifier la couleur de base. Les composants d'aperçu à gauche se mettront automatiquement à jour au fur et à mesure de vos modifications. Créez facilement des valeurs pour les variables CSS, Tailwind, SwiftUI ou CSS et copiez-les dans votre presse-papiers.

Example Components

Premium Wireless Headphones
New Release

Premium Wireless Headphones

High-fidelity audio with active noise cancellation, premium materials, and up to 30 hours of battery life. Perfect for music enthusiasts and professionals.

(128)
$249.99$299.9917% off
The Future of Web Development: AI-Powered Tools and Automation
Technology
Alex Chen

Alex Chen

Mar 15, 2025

The Future of Web Development: AI-Powered Tools and Automation

Explore how artificial intelligence is revolutionizing web development workflows, making developers more productive and efficient than ever before.

8 min read
24
1205
Web Development Workshop 2025
15Apr
Workshop

Web Development Workshop 2025

Join us for an intensive workshop on modern web development practices. Learn about the latest frameworks, tools, and techniques from industry experts. This hands-on session will cover everything from frontend development to backend architecture and deployment strategies.

Tue, Apr 15, 2025
9:00 AM - 5:00 PM

Tech Innovation Hub

123 Developer Street, Silicon Valley, CA

AttendeeAttendeeAttendee
+2

45 going

5 spots left

$299

Revenue Overview

Monthly revenue performance and key metrics

Total Revenue

$48,234
12.5%

vs. last month

Average Order Value

$156
3.2%

vs. last month

Conversion Rate

3.8%
1.1%

vs. last month

Active Customers

1,429
8.4%

vs. last month

Button States

Demonstration of primary button states: normal, hover, active, and disabled

Normal State

Hover State

Active State

Interactive Example

Disabled State

Sarah Wilson

Sarah Wilson

Senior Product Designer

Passionate about creating beautiful and functional user experiences. Focused on design systems and component-driven development.

Medium Slate Blue

#6366f1
100%
Gamme de couleurs
50
100
200
300
400
500
600
700
800
900
950
  medium-slate-blue: #6366f1;