Advanced HTML Colors

HTML colors can be defined in various ways: color names, RGB, HEX, HSL, and RGBA.

Color Names

<p style="color: Tomato;">Tomato</p>
<p style="color: Orange;">Orange</p>
<p style="color: DodgerBlue;">DodgerBlue</p>
<p style="color: SeaGreen;">SeaGreen</p>
<p style="color: Gray;">Gray</p>
<p style="color: SlateBlue;">SlateBlue</p>

HEX Colors

<p style="color: #ff0000;">Merah</p>
<p style="color: #00ff00;">Hijau</p>
<p style="color: #0000ff;">Biru</p>
<p style="color: #333333;">Abu-abu gelap</p>

RGB Colors

<p style="color: rgb(255, 0, 0);">Merah</p>
<p style="color: rgb(0, 255, 0);">Hijau</p>
<p style="color: rgb(0, 0, 255);">Biru</p>

RGBA Colors (Transparency)

<p style="color: rgba(255, 0, 0, 0.5);">Merah transparan</p>
<div style="background-color: rgba(0, 0, 0, 0.3); padding: 20px;">
    Latar belakang transparan
</div>

HSL Colors

<p style="color: hsl(0, 100%, 50%);">Merah</p>
<p style="color: hsl(120, 100%, 50%);">Hijau</p>
<p style="color: hsl(240, 100%, 50%);">Biru</p>

Case Study: Campus Color Scheme

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Campus Color Scheme</title>
    <style>
        :root {
            --primary-50: #eff6ff;
            --primary-100: #dbeafe;
            --primary-500: #3b82f6;
            --primary-600: #2563eb;
            --primary-700: #1d4ed8;
            --primary-900: #1e3a8a;
        }

        .color-box {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 5px;
            text-align: center;
            line-height: 100px;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Campus Color Scheme</h1>

    <div class="color-box" style="background: var(--primary-50); color: black;">50</div>
    <div class="color-box" style="background: var(--primary-100); color: black;">100</div>
    <div class="color-box" style="background: var(--primary-500);">500</div>
    <div class="color-box" style="background: var(--primary-600);">600</div>
    <div class="color-box" style="background: var(--primary-700);">700</div>
    <div class="color-box" style="background: var(--primary-900);">900</div>
</body>
</html>

Everyday Case Study

Case: A developer needs to create a gradient.

<style>
    .gradient-blue {
        background: linear-gradient(to right, #1e40af, #3b82f6);
        color: white;
        padding: 20px;
    }

    .gradient-sunset {
        background: linear-gradient(to right, #f97316, #dc2626);
        color: white;
        padding: 20px;
    }

    .gradient-dark {
        background: linear-gradient(to bottom, #1f2937, #111827);
        color: white;
        padding: 20px;
    }
</style>

<div class="gradient-blue">Gradient Biru</div>
<div class="gradient-sunset">Gradient Sunset</div>
<div class="gradient-dark">Gradient Gelap</div>

Color Palette Generator

/* Primary */
--primary-50: #eff6ff;
--primary-100: #dbeafe;
--primary-200: #bfdbfe;
--primary-300: #93c5fd;
--primary-400: #60a5fa;
--primary-500: #3b82f6;
--primary-600: #2563eb;
--primary-700: #1d4ed8;
--primary-800: #1e40af;
--primary-900: #1e3a8a;

/* Secondary */
--secondary-50: #fffbeb;
--secondary-100: #fef3c7;
--secondary-200: #fde68a;
--secondary-300: #fcd34d;
--secondary-400: #fbbf24;
--secondary-500: #f59e0b;
--secondary-600: #d97706;
--secondary-700: #b45309;
--secondary-800: #92400e;
--secondary-900: #78350f;

Best Practices

1. Use CSS variables: For consistency
2. Contrast ratio: Minimum 4.5:1 for text
3. Color palette: Maximum 3-4 colors
4. Accessibility: Test with a contrast checker tool
5. Dark mode: Consider it for dark mode

Summary

HTML colors create attractive designs. Use CSS variables for consistency and consider accessibility.