RED GREEN BLUE
COLORES
RGB
LOS COLORES EN HTML SE
ESPECIFICAN MEDIANTE EL
ESTÁNDAR RGB (RED GREEN BLUE).
INDICA QUE UNA COMBINACIÓN DE
LOS TRES COLORES BÁSICOS:
ROJO, VERDE Y AZUL PUEDE DAR
LUGAR A CUALQUIER OTRO COLOR.
EJEMPLO DE COLORES BÁSICOS
Red
R = 255, G = 0, B = 0 Hexadecimal #FF0000
Green
R = 0, G = 255, B = 0 Hexadecimal #00FF00
Blue
R = 0, G = 255, B = 0 Hexadecimal #004AAD
OTRAS COMBINACIONES GENERALES DE
COLORES
Negro
R = 0, G = 0, B = 0 Hexadecimal #0000000
Blanco
R = 255, G = 255, B = 255 Hexadecimal # FFFFFF
Amarillo
R = 255, G = 255, B = 0 Hexadecimal #FFFF00
Fucsia
R = 299, G = 116, B = 161 Hexadecimal #FF00FF
COMBINACIONES DE LOS MÚLTIPLES VALORES
HEXADECIMALES
Plata
R = 192, G = 192, B =1920 Hexadecimal #C0C0C0
A. Marino
R = 0, G = 0, B =255 Hexadecimal #424632
EJEMPLO DE COMBINACIONES GENERALES
Naranja
R = 255, G =165, B = 0 Hexadecimal #424632
V. Oliva
R = 60, G =70, B =50 Hexadecimal #000080
Colores Cromáticos
Paleta de colores
Barra superior: Formato de representación del color
hsl, rbg, hexadecimal…
Barras laterales:
derecha: selección del color
izquierda: opacidad del color
Recuadro izquierdo:
Tono del color que queremos ver
Fondos gradientes
Degradado Lineal
De arriba hacia abajo :
Background: linear-gradient(to bottom, #ff0000, #00ff00);
De abajo hacia arriba:
Background: linear-gradient(to top, #ff0000, #00ff00);
Degradado Diagonal
Crea una transición de colores diagonal
Background: linear-gradient(to bottom right,
#ff0000, #00ff00);
Variantes: to bottom left, to bottom right, to top left, to top right.
Degradado Radial
Crea un fondo de círculos concéntricos
Background: radial-gradient
(circle, #ff0000, #00ff00);
Parámetros angulares
Crea un parámetro circular de colores desde un punto concreto
Background: conic-gradient
(from 45deg, #ff0000, #00ff00, #0000ff);
From 45deg: Indica el grado desde cual comenzará a trazar
el círculo que describe la gama de colores usada.
At 0 0: Indica el punto desde el punto de la página que
quieres que empiece los valores pueden ser % o en px.
Patrones repetitivos
(sin degradado)
Especifica la inclinación con los grados (ej:90deg) y es el espacio que va a
ocupar cada color indicando su comienzo y su final (px, wv, hv, %)
background: repeating-linear-gradient
background: repeating-linear-gradient
rgba(0, 128, 0),
rgba(0, 128, 0) 40px,
rgba(165, 42, 42) 40px,
rgba(165, 42, 42) 80px,
rgba(0, 0, 0) 80px,
rgba(0, 0, 0) 120px);
Patrones repetitivos cruzados
Crea un fondo multicolor cruzado
Background: repeating-linear-gradient (190deg,
rgba(0, 128, 0, 0.5) 40px,
rgba(165, 42, 42, 0.5) 80px,
rgba(0, 0, 0, 0.5) 120px),
repeating-linear-gradient(-190deg,
rgba(255, 166, 0, 0.376) 30px,
rgba(0, 0, 255, 0.413) 60px,
pink 90px);
Se pueden agregar tantas “repeating-linear-gradient” como necesites:
Puedes agregar tantos colores como quieras en cada repetición.
SIEMPRE hay que agregarle opacidad para que se puedan ver los patrones por debajo y separaciónentre los mismos.
Estos también se pueden hacer que queden como líneas en cualquier dirección, círculos y varias combinaciones diferentes.
Patrones repetitivos cruzados
Conceptos
Repeating-linear-gradient para líneas acompañado de la inclinación
escrita en grados “90deg” van de 0deg a 360deg, aunque también se
pueden representar con valores de -180deg a 180deg
Repeating-radial-gradient para círculos, elipses o parámetros angulares,
siempre ha de ir especificado donde queremos que esté el centro del
círculo con “ellipse 50% 50%”
Los colores pueden ir en cualquier tipo de formato mencionado.
Añadir opacidad para los fondos combinados.
Los colores y las posiciones van entre paréntesis y separados por comas.
Amarillo Claro Verde Gris Perlado
PSICOLOGÍA DEL COLOR
Recomendaciones
Links de interés
https://coolors.co/ Página para paletas de colores que combinan entre si
https://htmlcolorcodes.com/color-picker/
Nos da una paleta de colores en la que podemos elegir uno y nos da combinaciones que
quedan bien
https://flatuicolors.com/ Nos da paletas de colores por defecto que combinan entre si
App
Ejercicios colores
-Ejercicio 1
Poner un color de fondo con degradado
un título y un texto que combinen. Aprovechando
flexbox, centramos el texto en el centro de la página.
-Ejercicio 2
Intenta recrear esta plantilla, puedes usar otros colores.
