Pembuat Tint Warna
Buat tint warna yang lebih terang dengan mencampurnya bersama putih dalam tahapan yang sama. Masukkan satu warna dalam format CSS apa pun, pilih 2 hingga 20 tahapan dan ruang pencampuran, lalu dapatkan tabel berisi nilai HEX, RGB, HSL, dan OKLCH untuk setiap tint, dimulai dari warna asli. Pencampuran sRGB sesuai dengan alat tint klasik dan Sass, sedangkan OKLab menghasilkan tahapan yang merata secara perseptual. Ideal untuk latar belakang, status hover, dan skala warna.
Pertanyaan yang sering diajukan
Apa itu tint?
Tint adalah warna yang dicampur dengan putih. Rona warnanya tetap sama dan warnanya menjadi lebih terang dan pucat, berbeda dengan nuansa yang dicampur dengan hitam atau tone yang dicampur dengan abu-abu.
Bagaimana tahapan pencampurannya ditentukan?
Dengan N tahapan, baris k mencampurkan warna dengan (k - 1) / N putih, jadi 10 tahapan menghasilkan 0%, 10%, 20%, dan seterusnya hingga 90%. Baris pertama selalu berisi warna asli Anda, dan putih murni tidak pernah disertakan.
Apa perbedaan pencampuran sRGB dan OKLab?
Pencampuran sRGB menghitung rata-rata nilai kanal yang dikodekan gamma, seperti yang dilakukan Sass mix() dengan putih dan sebagian besar pembuat tint klasik. Pencampuran OKLab berlangsung dalam ruang perseptual, sehingga tahapan kecerahannya terlihat lebih merata dan bagian yang terang tidak cepat memudar.
Format input apa yang bisa saya gunakan?
Kode hex dengan atau tanpa #, nama warna CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(), dan cmyk(). Masukkan satu warna untuk setiap proses.
Berapa banyak tint yang bisa saya buat?
Antara 2 dan 20 untuk setiap proses, dengan 10 sebagai nilai bawaan. Jumlahnya mencakup warna asli pada baris pertama.
Nilai apa saja yang ditampilkan tabel?
Untuk setiap tahapan, tabel menampilkan porsi putih, kode hex, rgb(), hsl(), dan oklch() dalam sintaks CSS modern. Kanal RGB berupa bilangan bulat, persentase HSL memiliki hingga dua angka desimal, sedangkan kecerahan dan kroma OKLCH memiliki hingga empat.
Apa yang terjadi pada warna transparan?
Alpha input dipertahankan untuk setiap tint karena putih dicampurkan dengan alpha yang sama. Kode hex kemudian memiliki 8 digit, dan fungsi CSS diakhiri dengan alpha setelah garis miring.
Apa yang terjadi pada warna di luar sRGB?
Pencampuran menggunakan warna sepenuhnya, tetapi HEX, RGB, dan HSL hanya dapat menampilkan sRGB, sehingga tahapan di luar gamut dipetakan ke sRGB dengan algoritme Color 4 CSS pada kolom-kolom tersebut. Kolom OKLCH mempertahankan nilai yang belum dipetakan.
Bagaimana cara menggunakan tint di CSS?
Salin nilai hex atau oklch() ke properti kustom seperti --brand-100 dan --brand-200. Untuk mencampurnya langsung di browser, color-mix(in oklab, var(--brand) 80%, white) menghasilkan tint 20% yang sama dengan pengaturan OKLab.
Bisakah saya menggunakan teks putih pada tint terang?
Biasanya tidak, karena tint terang memiliki kontras rendah terhadap putih. Gunakan teks gelap pada tint terang dan periksa setiap pasangan dengan pemeriksa kontras; teks normal memerlukan setidaknya 4.5:1 untuk WCAG AA.