/* ۱. نام رنگ‌ها */
h1 {
    color: red;
    background-color: yellow;
}

/* ۲. کد هگزادسیمال */
h2 {
    color: #ff0000;  /* قرمز */
    background-color: #00ff00;  /* سبز */
}

/* ۳. RGB */
h3 {
    color: rgb(255, 0, 0);  /* قرمز */
    background-color: rgb(0, 255, 0);  /* سبز */
}

/* ۴. RGBA (با شفافیت) */
h4 {
    color: rgba(255, 0, 0, 0.8);  /* قرمز با ۸۰٪ شفافیت */
    background-color: rgba(0, 255, 0, 0.5);  /* سبز با ۵۰٪ شفافیت */
}

/* رنگ پس‌زمینه */
.box1 {
    background-color: lightblue;
}

/* تصویر پس‌زمینه */
.box2 {
    background-image: url('pattern.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* گرادیان خطی */
.box3 {
    background: linear-gradient(45deg, red, yellow, green);
}

/* گرادیان شعاعی */
.box4 {
    background: radial-gradient(circle, blue, lightblue, white);
}

/* ترکیب چندین پس‌زمینه */
.box5 {
    background-color: #f0f0f0;
    background-image: url('dots.png');
    background-repeat: repeat;
    background-size: 20px 20px;
}

/* گرادیان خطی ساده */
.gradient1 {
    background: linear-gradient(to right, red, blue);
}

/* گرادیان با زاویه */
.gradient2 {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
}

/* گرادیان شعاعی */
.gradient3 {
    background: radial-gradient(circle, #ff9a9e, #fecfef, #fecfef);
}

/* گرادیان با نقاط توقف */
.gradient4 {
    background: linear-gradient(90deg, 
        red 0%, 
        orange 25%, 
        yellow 50%, 
        green 75%, 
        blue 100%);
}

/* گرادیان شعاعی بیضوی */
.gradient5 {
    background: radial-gradient(ellipse at center, 
        #667eea 0%, 
        #764ba2 100%);
}