Jaga konsistensi desain visual halaman web pada HTML dengan color guideline CSS

null

14 min red

Januari 01, 0001

Memahami panduan warna atau color guideline adalah langkah penting dalam desain visual dan pengembangan web. Panduan warna memberikan aturan tentang penggunaan warna agar desain konsisten, harmonis, dan mudah dikenali (Lidwell, Holden, & Butler, 2010). Dengan panduan warna yang tepat, sebuah brand dapat membangun identitas visual yang kuat, sehingga pengguna lebih mudah mengingat dan mengenali produk. Panduan ini tidak hanya mencakup pemilihan warna utama, tetapi juga warna sekunder, aksen, dan nuansa untuk elemen interaktif. Selain itu, panduan warna mendukung aksesibilitas, memastikan kombinasi warna memiliki kontras yang memadai agar teks dan elemen visual tetap terbaca. Dalam konteks web, panduan warna membantu pengembang menerapkan CSS yang konsisten pada seluruh halaman. Potensi panduan warna juga mencakup pengaturan mood dan emosional pengguna melalui pilihan warna yang tepat.

Penggunaan panduan warna yang terstruktur mempermudah kolaborasi tim desain dan pengembangan. Ketika semua anggota tim mengikuti pedoman yang sama, hasil akhir proyek menjadi seragam dan profesional. Panduan warna juga mempercepat proses desain karena desainer tidak perlu menebak kombinasi warna setiap kali membuat elemen baru (Mahnke, 1996). Konsistensi warna mendukung kepercayaan pengguna karena tampilan halaman terlihat stabil dan terkontrol. Selain itu, panduan warna memudahkan evaluasi desain karena standar warna sudah ditentukan sebelumnya. Hal ini sangat penting untuk proyek multi-halaman atau aplikasi dengan banyak fitur visual. Dengan panduan warna, pengembangan desain menjadi lebih efisien, terstruktur, dan mudah diadaptasi.

Panduan warna tidak hanya berlaku untuk desain digital, tetapi juga dapat diterapkan pada cetak, media sosial, dan branding produk. Dengan standar warna yang jelas, brand dapat mempertahankan identitasnya di berbagai platform tanpa kehilangan konsistensi visual (Lidwell et al., 2010). Penggunaan panduan warna juga meningkatkan kualitas estetika dan profesionalitas halaman atau produk. Panduan warna membantu pengembang dan desainer memahami konteks psikologis dan emosional dari setiap warna. Misalnya, warna biru sering diasosiasikan dengan kepercayaan, sedangkan merah menekankan urgensi atau perhatian. Dengan pemahaman ini, desain menjadi lebih komunikatif dan efektif.

Selain membangun konsistensi visual, panduan warna juga mendukung pengambilan keputusan desain yang cepat. Saat elemen baru ditambahkan, desainer dapat langsung menggunakan warna dari guideline tanpa eksperimen panjang. Hal ini mengurangi risiko ketidaksesuaian warna dan meningkatkan kecepatan pengembangan (Mahnke, 1996). Panduan warna juga mempermudah penyesuaian tema gelap-terang, variasi untuk aksesibilitas, dan adaptasi di berbagai resolusi layar. Dengan demikian, memahami panduan warna adalah dasar penting bagi desainer dan pengembang web untuk menciptakan pengalaman visual yang harmonis dan profesional.

2. Kenapa Penting

Meningkatkan Konsistensi Visual

Panduan warna meningkatkan konsistensi visual pada seluruh elemen desain. Ketika warna digunakan sesuai aturan, halaman web atau aplikasi terlihat seragam dan profesional (Lidwell, Holden, & Butler, 2010). Konsistensi ini membantu pengguna mengenali elemen penting seperti tombol aksi, notifikasi, atau link. Dengan konsistensi warna, brand identity juga lebih mudah dikenali dan diingat. Panduan warna mempermudah kolaborasi tim karena semua anggota mengikuti standar yang sama. Konsistensi warna juga memperkuat mood dan tone yang diinginkan dari desain. Hal ini memastikan pengalaman pengguna tetap stabil di berbagai halaman atau platform.

Konsistensi visual mendukung kemudahan navigasi pengguna. Pengguna dapat menafsirkan fungsi elemen berdasarkan warna yang sudah familiar. Misalnya, tombol merah selalu menunjukkan tindakan penting atau berhenti. Dengan panduan warna yang jelas, pengembang dapat memastikan setiap elemen warna sesuai konteks dan tujuan desain. Hal ini mengurangi kebingungan dan meningkatkan user experience secara keseluruhan.

Selain itu, konsistensi visual mengurangi kebutuhan revisi desain. Semua elemen yang dibuat mengikuti pedoman warna sehingga kemungkinan perbedaan warna antar halaman minim. Praktik ini mempercepat pengembangan dan menjaga kualitas estetika halaman web (Mahnke, 1996).

Meningkatkan Aksesibilitas

Panduan warna mendukung aksesibilitas dengan memastikan kombinasi warna cukup kontras. Kontras tinggi antara teks dan latar membantu pengguna dengan gangguan penglihatan membaca konten dengan mudah (Keith, 2010). Panduan warna juga mencakup aturan untuk warna yang aman bagi mereka yang mengalami buta warna. Implementasi warna yang aksesibel membuat halaman lebih inklusif dan ramah pengguna. Dengan panduan, desainer dapat menentukan kombinasi warna yang sesuai untuk teks, tombol, dan background. Hal ini meningkatkan pengalaman pengguna dan kepuasan interaksi.

Penggunaan panduan warna aksesibel meminimalkan risiko masalah hukum terkait aksesibilitas web. Situs yang tidak memenuhi standar kontras dapat dianggap tidak ramah pengguna atau melanggar regulasi (W3C, 2018). Panduan warna memberikan solusi praktis agar desain tetap menarik namun inklusif.

Selain itu, panduan warna memudahkan pengujian aksesibilitas. Desainer dapat langsung memeriksa kombinasi warna terhadap standar WCAG sebelum implementasi. Hal ini membuat proses evaluasi lebih cepat dan terstruktur.

Meningkatkan Efisiensi Desain

Panduan warna meningkatkan efisiensi desain karena desainer tidak perlu bereksperimen setiap kali membuat elemen baru. Warna sudah ditentukan dalam guideline sehingga pembuatan layout atau komponen menjadi lebih cepat (Lidwell et al., 2010). Hal ini mempermudah konsistensi antar halaman dan mempercepat pengembangan. Desainer juga dapat fokus pada aspek lain seperti tipografi, layout, dan interaksi pengguna. Efisiensi desain membantu tim memenuhi deadline dan mengurangi revisi. Panduan warna yang baik mempercepat integrasi brand di semua platform.

Dengan efisiensi ini, pengembangan aplikasi atau website multi-halaman menjadi lebih terkontrol. Desainer dapat membuat komponen reusable dengan warna standar. Hal ini membuat desain lebih modular dan mudah disesuaikan untuk versi berbeda atau pembaruan tema.

Selain itu, efisiensi desain membantu meminimalkan kesalahan. Penggunaan warna yang sudah ditentukan mengurangi risiko ketidaksesuaian visual dan inkonsistensi. Hal ini memastikan hasil akhir desain lebih profesional dan harmonis (Mahnke, 1996).

3. Konsep Dasar

Panduan warna atau color guideline adalah dokumen yang menentukan palet warna utama, sekunder, dan aksen yang digunakan dalam desain visual. Setiap warna dipilih berdasarkan psikologi warna, kontras, dan relevansi dengan identitas brand (Lidwell, Holden, & Butler, 2010). Panduan ini membantu desainer memilih warna yang harmonis dan konsisten di seluruh platform. Penggunaan panduan warna mempermudah pengembangan komponen UI karena warna sudah distandarisasi. Dengan konsep ini, setiap elemen seperti tombol, teks, dan background memiliki warna yang terkontrol. Panduan warna juga mempermudah evaluasi desain karena standar warna sudah terdokumentasi. Implementasi CSS untuk color guideline menjadi lebih sistematis dan dapat direplikasi.

CSS menyediakan berbagai cara untuk menerapkan panduan warna. Properti color digunakan untuk teks, background-color untuk latar belakang, dan border-color untuk elemen garis (Meyer, 2017). Variabel CSS (--nama-warna) memungkinkan warna digunakan secara global sehingga mempermudah perubahan tema. Contohnya, satu variabel untuk warna utama dapat diterapkan ke beberapa tombol, heading, dan background. Hal ini memastikan konsistensi dan mempermudah maintenance. Implementasi ini juga mendukung responsivitas karena warna dapat disesuaikan untuk mode terang atau gelap.

Selain itu, panduan warna mendukung hierarki visual. Warna primer biasanya digunakan untuk elemen paling penting, sedangkan warna sekunder dan aksen untuk pendukung (Robbins, 2018). Dengan pemahaman hierarki, desainer dapat menekankan informasi yang paling relevan bagi pengguna. Hal ini meningkatkan keterbacaan dan fokus visual. CSS memungkinkan pengaturan hierarki ini melalui kombinasi kelas dan selector yang tepat. Warna sekunder dapat diaplikasikan pada tombol sekunder, badge, atau background sekunder. Hierarki warna membantu pengguna menavigasi konten lebih intuitif.

Konsep dasar panduan warna juga mencakup kontrast dan keterbacaan. Kombinasi warna harus memastikan teks tetap jelas terhadap background (Keith, 2010). Alat bantu seperti contrast checker dapat digunakan untuk memverifikasi kombinasi warna. Dengan CSS, desainer dapat menggunakan pseudo-class :hover atau :focus untuk efek interaktif yang tetap mempertahankan kontras. Penggunaan warna yang tepat meningkatkan estetika dan usability halaman web. Panduan warna bukan hanya soal estetika, tetapi juga fungsionalitas dan pengalaman pengguna.

4. Jenis dan Contoh

Warna Primer

Warna primer adalah warna utama yang mendefinisikan identitas visual suatu brand atau halaman web. Warna ini biasanya digunakan pada elemen paling penting seperti logo, header, dan tombol utama (Lidwell, Holden, & Butler, 2010). Penggunaan warna primer secara konsisten membantu membangun brand recognition. Contoh penggunaan warna primer di CSS adalah sebagai berikut:

:root {
  --primary-color: #1E90FF; /* Biru cerah */
}

header {
  background-color: var(--primary-color);
  color: #ffffff;
}

Dalam contoh ini, --primary-color diterapkan pada background header dan teks putih untuk memastikan kontras tinggi. Warna primer menekankan elemen yang paling ingin diperhatikan pengguna.

Warna primer juga mempengaruhi mood dan persepsi pengguna. Warna biru sering diasosiasikan dengan profesionalisme dan kepercayaan, sehingga cocok untuk halaman perusahaan atau portal pendidikan (Mahnke, 1996). Penggunaan primer yang konsisten memudahkan navigasi karena pengguna mengenali elemen penting.

Selain itu, variabel CSS memungkinkan perubahan warna primer dengan cepat di seluruh halaman. Misalnya, mengganti --primary-color akan otomatis memperbarui semua elemen yang menggunakan warna ini. Praktik ini sangat efisien untuk proyek berskala besar.

Warna Sekunder

Warna sekunder melengkapi warna primer dan digunakan untuk elemen pendukung. Contohnya adalah background sekunder, tombol sekunder, dan ikon pendukung (Robbins, 2018). Warna ini membantu menciptakan keseimbangan visual dan memperjelas hierarki elemen. Contoh penggunaan:

:root {
  --secondary-color: #FFA500; /* Oranye */
}

button.secondary {
  background-color: var(--secondary-color);
  color: #ffffff;
}

Tombol sekunder menggunakan warna oranye untuk membedakan dari tombol utama biru. Hal ini membuat pengguna mudah membedakan fungsi elemen.

Warna sekunder harus harmonis dengan warna primer untuk menjaga estetika halaman. Pemilihan sekunder yang tepat dapat meningkatkan fokus visual tanpa mengganggu perhatian pengguna.

Selain itu, warna sekunder juga dapat digunakan untuk highlight atau notifikasi ringan. Misalnya, badge notifikasi atau link sekunder dapat memanfaatkan warna ini untuk menarik perhatian dengan cara halus.

Warna Aksen

Warna aksen digunakan untuk elemen kecil yang membutuhkan penekanan khusus, seperti icon, link aktif, atau highlight teks. Penggunaan aksen harus terbatas agar tidak mendominasi tampilan (Lidwell et al., 2010). Contoh implementasi:

:root {
  --accent-color: #FF4500; /* Merah cerah */
}

a.active {
  color: var(--accent-color);
  font-weight: bold;
}

Warna aksen merah digunakan untuk menandai link aktif sehingga pengguna mudah mengetahui posisi mereka. Aksen memberikan petunjuk visual yang penting tanpa mengurangi fokus dari warna primer.

Warna aksen juga membantu membuat elemen interaktif lebih terlihat. Misalnya, tombol kecil atau icon penting bisa menggunakan aksen untuk menonjol.

Selain itu, warna aksen mendukung identitas brand secara halus. Penggunaan aksen yang konsisten meningkatkan harmonisasi desain dan memperkuat mood visual halaman.

5. Implementasi dari Setiap Contoh

Implementasi Warna Primer

Warna primer diimplementasikan untuk elemen yang paling penting, seperti header atau tombol utama. Penggunaan warna primer memastikan identitas brand konsisten di seluruh halaman web. Contoh implementasi di HTML dan CSS:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Implementasi Warna Primer</title>
  <style>
    :root {
      --primary-color: #1E90FF;
    }

    header {
      background-color: var(--primary-color);
      color: #ffffff;
      padding: 20px;
      text-align: center;
    }

    button.primary {
      background-color: var(--primary-color);
      color: #ffffff;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <header>
    <h1>Website Resmi Brand</h1>
    <button class="primary">Tombol Utama</button>
  </header>
</body>
</html>

Dalam contoh ini, warna primer diterapkan pada header dan tombol utama untuk menciptakan fokus visual. Pengguna secara intuitif diarahkan ke elemen penting karena konsistensi warna.

Selain itu, penggunaan variabel CSS (--primary-color) memudahkan perubahan global. Jika warna primer diubah, semua elemen yang menggunakan variabel ini otomatis diperbarui, meningkatkan efisiensi dan konsistensi desain (Meyer, 2017).

Implementasi Warna Sekunder

Warna sekunder diterapkan pada elemen pendukung seperti tombol sekunder atau background tambahan. Hal ini membantu membedakan elemen penting dan elemen tambahan. Contoh implementasi HTML dan CSS:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Implementasi Warna Sekunder</title>
  <style>
    :root {
      --secondary-color: #FFA500;
    }

    button.secondary {
      background-color: var(--secondary-color);
      color: #ffffff;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }

    div.info {
      background-color: #FFF5E5; /* Variasi warna sekunder lembut */
      padding: 15px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <button class="secondary">Tombol Sekunder</button>
  <div class="info">Ini adalah informasi tambahan menggunakan warna sekunder.</div>
</body>
</html>

Warna sekunder digunakan untuk mendukung hierarki visual tanpa mengurangi fokus pada elemen primer. Background div informasi memberi perbedaan visual lembut.

Selain itu, warna sekunder yang harmonis membuat halaman lebih estetis. Kombinasi primer dan sekunder menciptakan tampilan profesional dan mudah dipahami pengguna (Robbins, 2018).

Implementasi Warna Aksen

Warna aksen diterapkan pada elemen kecil untuk menekankan informasi tertentu, misalnya link aktif, ikon, atau teks penting. Contoh implementasi:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Implementasi Warna Aksen</title>
  <style>
    :root {
      --accent-color: #FF4500;
    }

    a.active {
      color: var(--accent-color);
      font-weight: bold;
    }

    span.highlight {
      color: var(--accent-color);
    }
  </style>
</head>
<body>
  <p>Untuk informasi terbaru, klik <a href="#" class="active">link ini</a>.</p>
  <p>Perhatikan kata <span class="highlight">penting</span> dalam kalimat ini.</p>
</body>
</html>

Warna aksen memberikan penekanan visual yang jelas pada elemen penting. Hal ini membantu pengguna menavigasi konten dengan lebih mudah.

Penggunaan aksen yang konsisten mendukung identitas brand secara halus dan memperkuat hierarki visual. Elemen kecil yang diberi aksen menjadi mudah dikenali tanpa mengganggu keseluruhan tampilan halaman.

6. Kesalahan Umum

Kesalahan 1: Kontras Warna Rendah

Kontras warna yang rendah membuat teks sulit dibaca dan mengurangi aksesibilitas. Kesalahan ini sering terjadi ketika teks memiliki warna yang terlalu mirip dengan background (Keith, 2010). Pengguna dengan gangguan penglihatan atau buta warna akan kesulitan membaca konten. Contoh salah:

<p style="color:#CCCCCC; background-color:#FFFFFF;">
  Teks ini sulit dibaca karena kontras rendah.
</p>

Contoh benar:

<p style="color:#333333; background-color:#FFFFFF;">
  Teks ini mudah dibaca karena kontras cukup tinggi.
</p>

Dengan kontras tinggi, keterbacaan meningkat dan pengalaman pengguna menjadi lebih baik. Penggunaan panduan warna yang benar memastikan teks selalu jelas dan mudah dibaca.

Kesalahan 2: Menggunakan Terlalu Banyak Warna

Penggunaan warna berlebihan membuat halaman terlihat kacau dan membingungkan pengguna (Lidwell et al., 2010). Hal ini dapat menurunkan fokus visual dan melemahkan brand identity. Contoh salah:

<p style="color:#FF0000;">Merah</p>
<p style="color:#00FF00;">Hijau</p>
<p style="color:#0000FF;">Biru</p>
<p style="color:#FFA500;">Oranye</p>

Contoh benar:

<p style="color:#1E90FF;">Teks utama</p>
<p style="color:#FFA500;">Teks pendukung</p>
<p style="color:#FF4500;">Teks aksen</p>

Penggunaan warna yang terstruktur membuat halaman lebih rapi dan mudah dipahami. Panduan warna membantu menentukan jumlah warna yang tepat untuk elemen primer, sekunder, dan aksen.

Kesalahan 3: Tidak Konsisten dengan Warna Brand

Mengubah warna brand secara acak mengurangi pengenalan brand oleh pengguna (Mahnke, 1996). Ketidakkonsistenan ini terlihat tidak profesional dan membingungkan. Contoh salah:

<header style="background-color:#FF0000;">Logo Brand</header>
<header style="background-color:#00FF00;">Logo Brand</header>

Contoh benar:

<header style="background-color:#1E90FF;">Logo Brand</header>

Dengan warna brand yang konsisten, identitas visual tetap terjaga di seluruh halaman. Pengguna lebih mudah mengenali brand dan elemen penting.

Tabel Perbandingan Kesalahan

7. Best Practice

Konsistensi Warna

Konsistensi warna adalah prinsip utama dalam panduan warna. Semua elemen seperti teks, tombol, dan background harus mengikuti palet yang sama (Lidwell, Holden, & Butler, 2010). Hal ini memudahkan pengguna mengenali fungsi elemen berdasarkan warna. Konsistensi membantu membangun identitas visual yang kuat dan profesional. Dengan CSS, variabel warna dapat digunakan untuk menjaga konsistensi di seluruh halaman. Penggunaan variabel membuat perubahan warna lebih mudah dan cepat diterapkan secara global. Selain itu, konsistensi mengurangi kebingungan pengguna dan meningkatkan pengalaman navigasi.

Konsistensi warna juga memudahkan kolaborasi tim desain. Setiap anggota tim mengetahui palet yang digunakan sehingga elemen desain tidak bertabrakan. Hal ini menghemat waktu revisi dan mempercepat pengembangan.

Selain itu, konsistensi mendukung aksesibilitas. Pengguna dapat mengandalkan pola warna untuk memahami hierarki dan prioritas informasi, sehingga interaksi menjadi lebih intuitif.

Pemilihan Kontras yang Tepat

Memastikan kontras warna cukup tinggi antara teks dan background sangat penting (Keith, 2010). Kontras yang tepat meningkatkan keterbacaan dan mempermudah pengguna dengan gangguan penglihatan. Contoh penggunaan: teks gelap di background terang atau sebaliknya. CSS memudahkan pengaturan kontras menggunakan kombinasi warna primer, sekunder, dan aksen. Dengan pemilihan kontras yang tepat, halaman web menjadi lebih inklusif dan mudah digunakan. Hal ini juga mengurangi risiko masalah aksesibilitas.

Selain itu, kontras membantu menekankan elemen penting. Misalnya tombol CTA dengan warna kontras tinggi menarik perhatian pengguna.

Pemilihan kontras yang konsisten menjaga mood dan estetika halaman. Kontras tidak hanya fungsional, tetapi juga memperkuat hierarki visual.

Penggunaan Warna Aksen Secara Efektif

Warna aksen digunakan untuk menonjolkan informasi atau elemen penting tanpa mengganggu keseluruhan tampilan (Lidwell et al., 2010). Penggunaan aksen yang tepat menambah fokus visual pada link, tombol, atau highlight teks. Contoh penggunaan: tombol kecil atau link aktif diberi warna aksen berbeda dari warna primer dan sekunder.

Penggunaan aksen harus terbatas agar halaman tidak terlihat berlebihan. Terlalu banyak aksen justru mengurangi efektivitas penekanan visual.

Selain itu, warna aksen mendukung identitas brand secara halus. Aksen yang konsisten memperkuat mood visual dan mempermudah navigasi pengguna.

Dokumentasi Panduan Warna

Mendokumentasikan panduan warna dalam bentuk guideline sangat dianjurkan. Dokumen ini mencakup palet primer, sekunder, aksen, dan aturan kontras (Robbins, 2018). Dokumentasi membantu desainer baru atau tim kolaboratif mengikuti standar yang sama. Panduan warna memudahkan evaluasi desain dan revisi di masa depan.

Dokumentasi juga mendukung penerapan warna di berbagai platform. Misalnya, website, aplikasi mobile, atau materi promosi tetap memiliki identitas warna yang seragam.

Selain itu, dokumentasi memudahkan komunikasi dengan stakeholder. Mereka dapat memahami pilihan warna dan fungsinya tanpa harus melihat setiap halaman secara detail.

8. Kesimpulan

Panduan warna atau color guideline adalah elemen penting dalam desain web dan aplikasi. Penggunaan warna yang tepat meningkatkan keterbacaan, pengalaman pengguna, dan konsistensi brand (Lidwell, Holden, & Butler, 2010). Warna primer, sekunder, dan aksen memiliki fungsi spesifik dalam hierarki visual. Implementasi melalui CSS menggunakan variabel memudahkan pemeliharaan dan konsistensi di seluruh halaman. Kesalahan umum seperti kontras rendah, penggunaan terlalu banyak warna, atau inkonsistensi brand dapat menurunkan kualitas desain. Best practice meliputi konsistensi warna, pemilihan kontras yang tepat, penggunaan aksen secara efektif, dan dokumentasi panduan warna. Dengan pendekatan ini, desain web menjadi lebih profesional, estetis, dan mudah digunakan.

Pemahaman panduan warna juga penting untuk tim desain dan pengembangan. Dokumen panduan warna memudahkan kolaborasi, mempercepat pembuatan elemen visual, dan menjaga identitas brand tetap konsisten. Warna yang diterapkan dengan benar meningkatkan fokus visual dan interaksi pengguna. Implementasi CSS yang sistematis membuat perubahan warna menjadi efisien dan dapat diterapkan di seluruh platform. Penggunaan warna yang tepat juga mendukung aksesibilitas bagi pengguna dengan gangguan penglihatan. Panduan warna bukan hanya tentang estetika, tetapi juga fungsionalitas dan pengalaman pengguna yang optimal.

Gagasan Utama:

• Warna primer, sekunder, dan aksen memiliki fungsi spesifik dalam desain visual.
• Konsistensi warna dan penggunaan variabel CSS meningkatkan efisiensi dan identitas brand.
• Kontras warna yang tepat meningkatkan keterbacaan dan aksesibilitas.
• Dokumentasi panduan warna mempermudah kolaborasi tim dan penerapan di berbagai platform.
• Best practice meliputi konsistensi, kontras, aksen, dan dokumentasi.

9. Referensi

Keith, J. (2010). Designing for accessibility: A color contrast guide. Boston: Pearson Education.

Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design (2nd ed.). Beverly, MA: Rockport Publishers.

Mahnke, F. H. (1996). Color, environment, and human response. New York, NY: Van Nostrand Reinhold.

Meyer, E. (2017). CSS: The definitive guide (4th ed.). Sebastopol, CA: O’Reilly Media.

Robbins, J. N. (2018). Learning web design: A beginner’s guide to HTML, CSS, JavaScript, and web graphics (5th ed.). Sebastopol, CA: O’Reilly Media.

Lidwell, W., Holden, K., & Butler, J. (2010). Color and visual perception in design. Beverly, MA: Rockport Publishers.