Langkau ke kandungan utama

Pemilih Warna & Penjana Palet percuma

Pilih warna, tukar antara HEX/RGB/HSL dan jana palet yang harmoni.

Berfungsi luar talian selepas dimuatkan
HEX
HSV
h217Β°
s76%
v96%
hanya paparan

RGB

r
g
b

HSL

H
S
L

Format lain

HEX8#3b82f6ff
RGBrgb(59 130 246)
HWBhwb(217 23% 4%)
CMYKcmyk(76%, 47%, 0%, 4%)
OKLCHoklch(62.3% 0.188 259.8)
SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)
Android0xFF3B82F6
FlutterColor(0xFF3B82F6)

WCAG kontras

Warna bernama terdekat: dodgerblue Β· Teks hitam lebih mudah dibaca di sini (5.71:1)

Teks pada putih3.68:1AA besar
Teks pada hitam5.71:1AA
Teks pada #ffffff3.68:1AA besar

Warna pudar & seri (50–950)

Palet warna

Pelengkap

#3b82f6
#f6af3c

Triadi

#3b82f6
#f63c83
#83f63c

Analogus

#3ce0f6
#3b82f6
#523cf6

Monokromatik

#073c92
#0a5adb
#3b82f6
#85b2f9
#cee0fd

Kegunaan biasa

  • Pemilih Warna untuk Reka Bentuk WebPilih dan hasilkan warna untuk laman web anda β€” dapatkan nilai HEX, RGB, dan HSL serta palet harmoni.
  • Pemilih Warna untuk PenjenamaanBina palet warna jenama anda β€” pilih warna utama, menengah, dan penekanan yang berfungsi bersama.
  • Pemilih Warna untuk Media SosialBuat palet warna yang menarik perhatian untuk siaran media sosial, cerita, dan reka bentuk profil.
  • Pemilih Warna untuk Reka Bentuk CetakanPilih warna untuk bahan bercetak β€” risalah, kad nama, brosur β€” dengan pratonton warna yang tepat.
  • Pemilih Warna untuk PersembahanReka bentuk skema warna slaid β€” pilih warna teks yang boleh dibaca, palet carta, dan nada penekanan yang konsisten.

Cara ia berfungsi

Segalanya berjalan terus dalam pelayar anda menggunakan matematik penukaran tulisan tangan β€” tiada pustaka warna, tiada pergi-balik pelayan. Anda pilih warna melalui input warna asli pelayar atau EyeDropper API, dan alat ini serta-merta menukarnya kepada enam format sambil juga mengira nisbah kontras WCAG dan menjana palet harmoni.

  1. 1
    Input warna melalui API asli
    Anda pilih warna melalui widget <input type="color"> terbina dalam pelayar, atau β€” dalam pelayar berasaskan Chromium β€” EyeDropper API membolehkan anda menyampel mana-mana piksel pada skrin anda. Kedua-dua laluan mengembalikan rentetan heks yang menjadi sumber kebenaran tunggal.
  2. 2
    Penukaran format tulisan tangan
    Alat ini menukar nilai heks kepada RGB, HSL, HSV, CMYK, dan OKLCH menggunakan fungsi matematik sendiri (tiada pustaka luaran). Penukaran OKLCH melinearkan saluran sRGB, mengenakan matriks punca-kubus OKLab, kemudian memperoleh kroma dan sudut hiu β€” sepadan dengan output CSS Color Level 4 moden.
  3. 3
    Pengiraan nisbah kontras WCAG
    Keluminan relatif dikira daripada saluran RGB yang dilinearkan menggunakan formula WCAG 2.x. Alat ini kemudian mengira nisbah kontras terhadap putih tulen dan hitam tulen dan melabelkannya AA-besar, AA, AAA, atau Gagal mengikut ambang WCAG (3:1, 4.5:1, 7:1).
  4. 4
    Penjanaan palet harmoni dan simpanan tempatan
    Contoh warna komplementari, triadik, analog, dan monokromatik diperoleh dengan memutar atau melangkah nilai hiu dan kecerahan HSL secara matematik. Palet tersimpan ditulis ke localStorage dalam pelayar anda β€” tiada apa keluar dari peranti anda.

Alat berkaitan

Soalan lazim