Värisävyjen luominen yhdestä perusväristä

Ilmainen verkkotyökalumme luo välittömästi erilaisia sävyjä ja sävyjä mille tahansa valitsemallesi värille. Olitpa sitten suunnittelija, kehittäjä tai digitaalinen taiteilija, syötä vain heksakoodi tai valitse väri – kuten Lavender – ja generaattorimme luo täydellisen paletin kauniisti tasavälein. Käytä näitä värejä rakentaaksesi näyttäviä käyttöliittymäkomponentteja, luodaksesi mukaansatempaavia kuvituskuvia tai luodaksesi dynaamisia CSS-teemoja seuraavaa projektiasi varten.

Ohjeet

Säädä perusväriä oikealla olevalla työkalupaneelilla sävyalueen muuttamiseksi. Vaihda perusväriä muokkauspainikkeella. Vasemmalla olevat esikatselukomponentit päivittyvät automaattisesti muutosten yhteydessä. Luo helposti arvoja CSS-, Tailwind-, SwiftUI- tai CSS-muuttujille ja kopioi ne leikepöydälle.

Example Components

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

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

1205

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

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

Senior Product Designer

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

Explore More Color Shades

Red Green Blue Yellow Cyan Magenta Black White Gray Orange Purple Brown Alice Blue Antique White Aqua Aquamarine Azure Beige Bisque Blanched Almond Blue Violet Burly Wood Cadet Blue Chartreuse Chocolate Coral Cornflower Blue Cornsilk Crimson Dark Blue Dark Cyan Dark Golden Rod Dark Gray Dark Green Dark Khaki Dark Magenta Dark Olive Green Dark Orange Dark Orchid Dark Red Dark Salmon Dark Sea Green Dark Slate Blue Dark Slate Gray Dark Slate Grey Dark Turquoise Dark Violet Deep Pink Deep Sky Blue Dim Gray Dim Grey Dodger Blue Fire Brick Floral White Forest Green Gainsboro Ghost White Gold Golden Rod Green Yellow Honey Dew Hot Pink Indian Red Indigo Ivory Khaki Lavender Lavender Blush Lawn Green Lemon Chiffon Light Blue Light Coral Light Cyan Light Golden Rod Yellow Light Gray Light Green Light Pink Light Salmon Light Sea Green Light Sky Blue Light Slate Gray Light Steel Blue Light Yellow Lime Lime Green Linen Maroon Medium Aqua Marine Medium Blue Medium Orchid Medium Purple Medium Sea Green Medium Slate Blue Medium Spring Green Medium Turquoise Medium Violet Red Midnight Blue Mint Cream Misty Rose Moccasin Navajo White Navy Old Lace Olive Olive Drab Orange Red Orchid Pale Golden Rod Pale Green Pale Turquoise Pale Violet Red Papaya Whip Peach Puff Peru Pink Plum Powder Blue Rebecca Purple Rosy Brown Royal Blue Saddle Brown Salmon Sandy Brown Sea Green Sea Shell Sienna Silver Sky Blue Slate Blue Slate Gray Snow Spring Green Steel Blue Tan Teal Thistle Tomato Turquoise Violet Wheat White Smoke Yellow Green

Lavender

100%

Värialue

100

200

300

400

500

600

700

800

900

950

  lavender-50: #f7f7fd;
  lavender-100: #eeeefc;
  lavender-200: #e6e6fa;
  lavender-300: #cacadb;
  lavender-400: #aeaebd;
  lavender-500: #93939f;
  lavender-600: #797983;
  lavender-700: #606067;
  lavender-800: #48484d;
  lavender-900: #313134;
  lavender-950: #1c1c1d;

Insert Color Range