Цвет в CSS можно задать несколькими способами, и у каждого свои сценарии применения. Именованные цвета вроде red или tomato удобны для быстрых набросков, но в реальном проекте почти всегда используют шестнадцатеричный код или запись через rgb, потому что так проще подобрать точный оттенок под остальной дизайн.
Формат rgba и его более новый аналог с ключевым словом rgb и слэшем позволяют задать ещё и прозрачность цвета. Это удобно для полупрозрачных подложек под текст поверх фотографии или для лёгкого затемнения фона при открытии модального окна, когда основной контент должен оставаться видимым, но приглушённым.
Свойство background куда богаче, чем просто заливка цветом. Через него можно задать градиент, фоновое изображение, его позицию и повторение. Часто background используют как сокращённую запись, которая объединяет сразу несколько отдельных свойств вроде background-color, background-image и background-position.
Границы, помимо простого сплошного варианта, поддерживают пунктир, точки и двойную линию, а свойство border-radius скругляет углы вплоть до полного круга при достаточно большом значении. Скруглённые углы карточек, кнопок и аватаров — это почти всегда именно border-radius, а не отдельное изображение с уже скруглёнными краями, как делали много лет назад.
Тень, box-shadow, добавляет блоку глубины без единой картинки — можно задать смещение, размытие, растяжение и цвет тени, а также сделать её внутренней вместо внешней. Аккуратная лёгкая тень часто визуально отделяет карточку от фона куда убедительнее, чем просто граница.
Разные варианты записи цвета и все свойства фона с примерами перечислены в разделе про фоны и границы на MDN.
Стоит помнить и про контраст между текстом и фоном — красивый бледный текст на светлой подложке может выглядеть стильно на макете, но на практике оказывается трудночитаемым для многих посетителей, особенно при ярком солнечном свете на экране телефона.
