edubun
Bahasa Indonesia
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
Beranda›Warna dan desain

Teori warna

Setiap warna di layar dinyatakan dengan tiga angka. Kamu akan membangun kubus RGB dan silinder HSL dalam 3D, melihat posisi warna komplementer dan triadik pada lingkaran rona, mencampur cahaya dan tinta, serta menghitung rasio kontras WCAG untuk memeriksa keterbacaan teks.

Progres

Tentang kursus ini

Pada tahun 1660-an Isaac Newton mulai melewatkan sinar matahari melalui prisma kaca di ruangan yang digelapkan. Ia menunjukkan bahwa cahaya putih adalah pita warna dan bahwa prisma kedua tidak bisa memecah warna-warna itu lebih jauh. Dalam Opticks tahun 1704 ia melengkungkan pita itu menjadi lingkaran, membagi tepinya menjadi tujuh bagian dengan perbandingan tangga nada musik, dan menaruh putih di tengah. Gambar itu salah satu lingkaran warna pertama, dan setiap roda rona dalam kursus ini berasal darinya. Setiap warna di layar adalah tiga angka, dan retina memiliki sekitar 6 juta sel kerucut dari hanya tiga jenis.

Ketujuh unitnya dimulai dari cara kita melihat warna, lalu RGB dan kode hex: 256 tingkat masing-masing untuk merah, hijau, dan biru menghasilkan 16 777 216 warna, setiap warna adalah satu titik di dalam kubus. Maxwell menunjukkan pita kain tartan yang difoto melalui filter merah, hijau, dan biru di Royal Institution pada 1861, dan metode tiga kanal itu masih dipakai setiap kamera dan layar digital. Rona, saturasi, dan kecerahan mencatat bahwa kuning dan biru sama-sama berkecerahan 50% dalam HSL, tetapi kuning memantulkan cahaya hampir 13 kali lebih banyak daripada biru. Warna komplementer, analog, dan triadik ditempatkan pada lingkaran rona. Pencampuran aditif dan subtraktif mencakup Coloritto karya Jacob Christoph Le Blon sekitar 1722, yang disebut Smithsonian sebagai catatan pertama kedua gagasan itu. Rasio kontras menunjukkan abu-abu #767676 di atas putih pada 4.54:1 lolos batas minimum teks isi menurut WCAG, sedangkan #777777 pada 4.48:1 gagal. Unit terakhir mencatat bahwa sekitar 8 persen laki-laki mengalami defisiensi penglihatan warna merah-hijau. Lab 3D membangun kubus RGB dan silinder HSL.

Sebelum mulai

Membandingkan warna melalui angkanya membantu ketika dua contoh tampak mirip tetapi berperilaku berbeda. Pelajaran memperkenalkan RGB dan kode heksadesimal sebelum HSL, hubungan warna, serta kontras. Perhatikan perbedaan mencampur cahaya layar dan tinta, karena nama warna yang sama tidak menjamin hasil yang sama.

Setelah selesai

Kamu bisa membaca nilai RGB dan heksadesimal, mengatur rona, saturasi, serta kecerahan, dan memilih warna komplementer, analog, atau triadik. Kamu bisa membedakan pencampuran cahaya aditif dan tinta subtraktif, memeriksa rasio kontras teks berdasarkan WCAG, serta menjelaskan mengapa warna saja tidak cukup untuk menandai kesalahan pada formulir.

  1. 1Cara kita melihat warnaRetina memiliki sekitar 6 juta sel kerucut yang hanya terdiri atas tiga jenis. Setiap warna yang pernah kamu lihat berasal dari gabungan kekuatan respons ketiga jenis sel tersebut.
  2. 2RGB dan kode hexDengan 256 tingkat untuk masing-masing merah, hijau, dan biru, layar dapat menampilkan 256 × 256 × 256 = 16 777 216 warna. Setiap warna merupakan sebuah titik di dalam kubus.
  3. 3Rona, saturasi, dan kecerahanDalam HSL, kuning dan biru sama-sama memiliki kecerahan 50%, tetapi menurut rumus luminans WCAG, kuning memantulkan cahaya hampir 13 kali lebih banyak daripada biru.
  4. 4Warna komplementer, analog, dan triadikPada roda warna layar, komplemen biru pada 240 derajat adalah kuning pada 60 derajat, sedangkan pada roda warna pelukis, jingga berhadapan dengan biru.
  5. 5Pencampuran aditif dan subtraktifTinta sian di kertas putih menyerap cahaya merah. Karena itu, sian dan magenta yang dicetak bertumpuk hanya menyisakan biru.
  6. 6Rasio kontras dan keterbacaan teksAbu-abu #767676 di atas putih memiliki rasio kontras 4.54:1 dan memenuhi batas minimum WCAG untuk teks isi. Satu tingkat lebih terang, #777777, menghasilkan 4.48:1 dan tidak lolos.
  7. 7Menggunakan warna dalam desainSekitar 8 persen laki-laki memiliki gangguan penglihatan warna merah-hijau. Formulir yang hanya menandai kesalahan dengan merah membuat banyak dari mereka harus menebak.

Kursus terkait

  • Membaca not · Teori musik
    Pelajari cara membaca nada pada paranada: kunci treble, kunci bas, garis bantu, paranada ganda, tanda kres dan mol, serta berbagai nama yang dipakai musisi untuk nada yang sama. Setiap unit memiliki kuis paranada atau papan tuts yang bisa kamu mainkan.
  • Langkah pertama bermain piano · Bermain alat musik
    Kenali papan tuts, pelajari nama tuts putih, letakkan tangan kananmu, lalu mainkan melodi pertamamu pada papan tuts di bawah. Kamu bisa memakai mouse, layar sentuh, atau tombol komputer.
  • Orkestra · Sejarah musik dan mendengarkan
    Dalam sebuah orkestra simfoni lengkap, lebih dari 100 pemain bisa tampil di satu panggung. Jelajahi panggung 3D dan pilih instrumen untuk mendengar tiruan bunyinya yang disintesis serta melihat jangkauannya pada papan tuts. Lalu, susun sebuah lagu terkenal dengan menambahkan satu keluarga instrumen demi satu. Dalam tujuh unit, kamu akan mempelajari sejarah, keempat keluarga instrumen, dirigen dan partitur, serta cara mendengarkan orkestra.
  • Menggambar perspektif · Menggambar
    Setiap gambar perspektif adalah gambar yang dijiplak pada kaca imajiner di antara mata dan dunia. Amati ruangan 3D dengan titik pandang dan bidang gambar berupa kaca. Beralihlah antara perspektif satu, dua, dan tiga titik, lalu naikkan tinggi mata untuk melihat pergerakan cakrawala serta titik hilang.
Sumber kursus ini (14)
  • W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
  • contrast ratio (L1 + 0.05) / (L2 + 0.05)
  • range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
  • 1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
  • W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
  • OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
  • OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
  • Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
  • The Newton Project (University of Oxford)
  • Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
  • History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
  • LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
  • RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
  • University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).

Diperiksa: 2026-10-17