Penjana Palet Warna

Penjana
简 繁 BM BI 日本語 한국어 ไทย EN
Share:
By Checked against sources by , Founder & Architect, RECATOOLS Published Updated Last reviewed

Jana palet lima warna yang harmoni dengan satu ketikan — rawak, pelengkap, analog, triadik atau monokrom. Kunci warna yang anda suka dan kocak semula yang lain, klik untuk menyalin sebarang kod HEX, dan eksport kad palet yang cantik. Dalam pelayar sahaja, serta-merta.

RT-FUN-091 · Fun & Misc
Pelayar anda terlalu lama untuk ciri interaktif alat ini. Sila kemas kini kepada Safari 13.1, Chrome atau Edge 80, atau Firefox 74 dan ke atas.

Penjana Palet Warna

(atau tekan Space)

Semakan kontras (WCAG 2.2)

 

WarnaHEXrgb()hsl()Atas putihAtas hitam
     
     
     
     
     

Setiap pasangan, kontras tertinggi dahulu

  1. Aa
  2. Aa
  3. Aa
  4. Aa
  5. Aa
  6. Aa
  7. Aa
  8. Aa
  9. Aa
  10. Aa

Angka ialah nisbah kontras WCAG 2.2, dibundarkan ke bawah, jadi 4.5:1 yang dipaparkan memang mencapai 4.5:1. Teks badan perlukan 4.5:1 (AA) atau 7:1 (AAA); teks besar (18pt, atau 14pt tebal) perlukan 3:1. Peraturan harmoni hanya menentukan hubungan rona, bukan kontras: dua warna bertentangan pada roda boleh mempunyai luminans hampir sama.

Advertisement
After tool · AD-W1 Responsive

Cara guna

Pilih mod palet

Pilih daripada Rawak, Pelengkap, Analog, Triadik atau Monokrom. Setiap satu ialah peraturan harmoni warna yang menentukan bagaimana lima warna itu berkait antara satu sama lain.

Tekan Jana, atau tekan Space

Setiap tekanan menghasilkan palet harmoni yang baharu. Tak suka? Tekan lagi, atau cuma ketik bar ruang untuk mengocak semula dengan pantas.

Kunci dan salin

Jumpa warna yang anda gemari? Ketik 🔓 padanya untuk menguncinya supaya ia kekal pada penjanaan seterusnya. Klik mana-mana nilai HEX untuk menyalinnya (cth. #E8622A) terus ke dalam reka bentuk anda.

Muat turun atau kongsi kad

Ketik “Muat turun palet” untuk menyimpan keseluruhan set sebagai imej (berserta kod HEX), “Kongsi” untuk menghantarnya kepada rakan, atau eksport sebagai PDF.

Penjana Palet Warna: warna yang baik dalam beberapa saat, melalui teori warna

Memilih warna selalunya bahagian reka bentuk yang membuatkan orang tersangkut: satu warna nampak elok bersendirian, tetapi lima warna yang dicampur begitu saja akan berlanggar. Penjana ini menjadikan peraturan di sebalik harmoni warna sebagai satu butang — ia bukan memberi anda lima warna rawak, tetapi membina satu set yang secara semula jadi terkoordinasi mengikut geometri roda warna. Anda cuma pilih, kunci dan salin warna yang anda suka terus ke dalam reka bentuk.

Lima mod, lima hubungan

Alat ini menawarkan peraturan harmoni yang paling kerap digunakan, setiap satu satu hubungan pada roda warna: Monokrom — satu rona, hanya berubah pada kecerahan, paling selamat dan tidak lapuk; Analog — rona bersebelahan pada roda, lembut dan semula jadi, seperti warna satu pemandangan; Pelengkap — dua rona bertentangan terus, kontras tinggi dan menarik mata; Triadik — tiga rona berjarak sama, terang namun seimbang; dan Rawak — rona dibebaskan sambil mengekalkan julat kecerahan yang jelas, untuk ilham yang tidak diduga. Tukar mod dan keseluruhan hubungan turut berubah.

"Palet yang baik bukan dicampur sembarangan — ia disusun mengikut hubungan."

Apa itu HEX, dan kenapa ia ada di mana-mana

Rentetan di bawah setiap warna, seperti #E8622A, ialah kod HEXnya — "kad pengenalan" sejagat untuk warna di seluruh web, perisian reka bentuk dan hampir setiap alat digital. Ia ialah # diikuti enam digit perenambelasan, mengekod kekuatan saluran merah, hijau dan biru. Klik satu untuk menyalinnya, kemudian tampal ke dalam CSS, Figma atau slaid anda dan warnanya sepadan dengan tepat. Setiap warna yang dijana alat ini disertakan HEXnya, sedia digunakan.

Sepatah kata tentang kontras

Selain kelihatan cantik, palet perlu berfungsi: teks memerlukan kontras yang cukup terhadap latar belakangnya supaya kekal boleh dibaca (piawai kebolehcapaian WCAG mencadangkan sekurang-kurangnya 4.5:1 untuk teks badan). Label HEX pada kad bertukar secara automatik antara hitam dan putih bergantung pada terang atau gelap setiap petak, supaya ia kekal mudah dibaca — peringatan berguna untuk menyemak kontras setiap kali anda menggunakan warna ini untuk teks dan latar belakang. Keseluruhan alat berjalan secara setempat dalam pelayar anda, serta-merta, tanpa memuat naik apa-apa.

Advertisement
After how-to · AD-W2 Responsive

Bulatan tujuh warna Newton, 16.7 juta warna HEX, dan mengapa kecerahan HSL mengelirukan

01

Kod HEX mengekod merah, hijau dan biru dalam perenambelasan, setiap saluran 00–FF (0–255) — kira-kira 16.7 juta warna secara teorinya.

02

Opticks karya Newton (terbitan pertama 1704; Buku I, Bahagian II, Prop. VI) melukis bulatan yang dibahagi kepada tujuh warna, merah hingga ungu, dengan panjang lengkok mengikut sela tangga nada muzik — nenek moyang roda rona yang diputar oleh alat ini.

03

Mata manusia paling sensitif kepada hijau, sebab itulah formula luminans memberi hijau pemberat tertinggi (kira-kira 0.72), jauh melebihi merah (0.21) dan biru (0.07).

04

Piawai kebolehcapaian WCAG meminta sekurang-kurangnya kontras 4.5:1 antara teks badan dan latar belakang (3:1 untuk teks besar), demi melayani pengguna rabun.

05

Skrin menggunakan RGB (cahaya tambahan) dan percetakan menggunakan CMYK (dakwat tolakan); HEX yang sama boleh kelihatan sedikit berbeza di skrin berbanding di atas kertas.

06

Alat ini menjana palet dalam HSL kerana harmoni ialah putaran sudut rona. Tetapi kecerahan HSL bukan apa yang dilihat mata: CSS Color 4 menunjukkan kuning hsl(60 100% 50%) dan biru hsl(240 100% 50%) sama-sama 50% kecerahan, namun luminans relatif WCAG masing-masing 0.93 dan 0.07 — sebab itu semakan kontras di atas mengukur setiap pasangan.

Soalan Lazim

  • Setiap petak menunjukkan kod HEX (cth. #E8622A). Klik untuk menyalinnya, kemudian tampal ke dalam CSS, Figma, Photoshop, slaid atau mana-mana yang menerima HEX — warnanya sepadan dengan tepat. Anda juga boleh memuat turun kad palet sebagai rujukan.

  • Setiap satu memetakan geometri pada roda warna: Monokrom = satu rona, kecerahan berubah (paling selamat); Analog = rona bersebelahan (lembut); Pelengkap = rona bertentangan (kontras tinggi); Triadik = tiga rona berjarak sama (terang, seimbang); Rawak = rona bebas tetapi julat kecerahan jelas. Tukar mod, seluruh hubungannya berubah.

  • Ketik 🔓 pada sesuatu warna untuk menguncinya; kali seterusnya anda tekan Jana, warna terkunci kekal dan hanya yang tidak terkunci berubah. Itu membolehkan anda mengekalkan satu dua warna kegemaran dan mengocak semula yang lain sehingga keseluruhan set sesuai.

  • Melainkan anda menetapkan warna asas, ya — setiap Jana memilih rona, ketepuan dan kecerahan asas secara rawak, kemudian membina empat warna lain mengikut peraturan tetap mod itu (peraturan dipaparkan di bawah kawalan). Dengan “Mula daripada warna ini” ditanda, warna anda dikekalkan tepat dan hanya mod Rawak yang masih memilih apa-apa secara rawak.

  • Tidak secara automatik, dan mod harmoni sendiri tidak menjaminnya: dua rona pelengkap boleh mempunyai luminans hampir sama, dan kontras bergantung pada luminans. Apa yang alat ini lakukan ialah mengukur. Semakan kontras menyenaraikan kesemua sepuluh pasangan dengan nisbah WCAG 2.2 (4.5:1 ialah ambang AA untuk teks badan, 3:1 untuk teks besar), dan label setiap petak memakai hitam atau putih, yang mana lebih tinggi, jadi sentiasa mencapai 4.5:1. Ia tidak menyimulasikan kekurangan penglihatan warna.

  • Boleh. Pilih warna dalam “Warna asas” (atau tandakan “Mula daripada warna ini”) dan setiap mod membina palet di sekelilingnya; warna anda dikekalkan tepat, di petak yang ditetapkan oleh peraturan untuk warna asas. Anda juga boleh mengunci mana-mana petak dengan 🔒 dan mengocak semula yang lain.

  • Imej JPEG resolusi tinggi yang menunjukkan lima petak warna dengan nilai HEX masing-masing, sesuai untuk dikongsi atau diarkibkan; PDF juga tersedia. Keseluruhan imej dijana pada peranti anda, tidak melalui pelayan.

  • Ketiga-tiganya tatatanda berbeza untuk warna yang sama. RGB guna tiga nombor 0–255 untuk merah, hijau, biru; HEX ialah RGB ditulis dalam perenambelasan (#RRGGBB); HSL pula menerangkannya melalui rona, ketepuan dan kecerahan, lebih dekat dengan gerak hati manusia. Alat ini menerbitkan keharmonian dalam HSL dan mengeluarkan HEX sejagat.

  • Tidak. Setiap palet dijana serta-merta dalam pelayar anda — tidak dimuat naik, tidak ditulis ke URL, dan tidak dikumpulkan. Muat semula halaman dan ia bermula semula.

Kaedah & sumber

Cara pengiraan

Five colours from fixed HSL hue rotations of a base (complementary +180°, triadic ±120°, analogous 20° steps, monochromatic lightness ladder); HSL to sRGB by the CSS Color 4 §7.1 algorithm. Every pair's WCAG 2.2 contrast ratio, (L1 + 0.05) / (L2 + 0.05), shown rounded down; swatch labels use black or white, whichever contrasts more (ColourPaletteKernel).

Piawaian yang digunakan

  • Colour conversion: HSL to sRGB and back by the W3C CSS Color Module Level 4 sample algorithms (§7.1 hslToRgb, §7.2 rgbToHsl), through the site's shared ColourConvertKernel; HEX as #RRGGBB.
  • Contrast: WCAG 2.2 relative luminance (sRGB linearised at 0.04045; L = 0.2126 R + 0.7152 G + 0.0722 B) and contrast ratio (L1 + 0.05) / (L2 + 0.05). Bands: 7:1 AAA and 4.5:1 AA for body text (SC 1.4.6, SC 1.4.3), 3:1 for large text (18 point, or 14 point bold). Ratios print rounded DOWN to one decimal, so a figure shown as 4.5:1 is never a 4.46 that fails.
  • Harmony rules are this tool's own, stated on the page in degrees and percent: analogous −40° to +40° in 20° steps; complementary three of the base hue and two at +180°; triadic +120° and +240° plus a tint and a shade; monochromatic lightness 88/72/56/40/26%; random five hues over a random 40–160° arc. A base colour the reader enters is kept exactly.
  • HSL lightness is not perceived lightness (CSS Color 4 §7: yellow and blue at 50% have WCAG luminance 0.93 and 0.07), so no harmony is presented as accessible; every pair is measured instead.
  • Corrected 2026-11-03: label ink by luminance < 0.45 (32.5% of 500,000 generated swatches under 4.5:1, worst 2.10:1) replaced by the higher-contrast of black and white (floor 4.58:1); Newton's colour circle dated 1666 corrected to Opticks, 1704.

Sumber rujukan

  • W3C. CSS Color Module Level 4, Candidate Recommendation Draft, 1 November 2026 — §7.1 and §7.2 sample code, and the §7 note on HSL lightness across hues: https://www.w3.org/TR/css-color-4/
  • W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — definitions of relative luminance, contrast ratio and large-scale text; SC 1.4.3 and SC 1.4.6: https://www.w3.org/TR/WCAG22/
  • Newton I. Opticks. 4th ed. London: William Innys; 1730 (first edition 1704). Book I, Part II, Prop. VI, the seven-part colour circle. Project Gutenberg: https://www.gutenberg.org/ebooks/33504

Apa yang boleh menjadikan ini lapuk

  • None at runtime: palettes and contrast are computed in the browser and nothing the reader picks is sent or written to the URL.
Advertisement
Pre-footer · AD-W3 728 × 90