2/22/2018

GRAFICACIÓN
I.S.C. Walter Ivan Manzanilla Yuit

6-B
Web safe color palette

Alumno:
Miguel Ángel Hobak Koh

INGENIERIA EN SISTEMAS COMPUTACIONALES

1

SEMESTRE 2017B
 Modelo RGB

¿Cómo funciona?

Lo primero que hay que saber es que en los dispositivos electrónicos todos los colores se
forman mediante la mezcla aditiva de los colores primarios rojo, verde y azul.

El sistema hexadecimal se basa en este principio de un modo bastante fiel, ya que lo que
estos códigos hacen no es otra cosa que especificar qué cantidad o intensidad de cada
color primario hay que añadir a la mezcla.
Un código de color está formado con seis caracteres y que representan, en pares,
la intensidad presente de cada uno de los tres colores de la mezcla aditiva.

De modo que en este caso, hay una intensidad de “72” del color rojo, una de “3c”
del color verde, y una de “22” del color azul:

Recordar el orden es muy fácil, porque coincide con el que sigue otro sistema muy popular,
que es el famoso RGB (Red – Green – Blue).

2
La diferencia con el sistema hexadecimal es que la sintaxis es diferente (el
primero se define sobre una base 16, de ahí su nombre; mientras que el RGB
tiene base 10).

En cuanto a su uso, el hexadecimal se suele usar más en diseño web, porque al

estar en una única cadena de caracteres es más fácil de manejar, aunque la
especificación CSS soporta ambos métodos:

elemento {color: #f57b7b}

es igual a

elemento {color: rgb(238, 61, 61)

3
 Web safe color palette

Usando la librería turlte

Window control
Colores RGB
Velocidad

Función para dibujar un cuadrado

“an” = longitud del lado
“color” = el color de relleno

Problema
Hacer un script que haga esto:

4
Observaciones de la paleta
Hexadecimal o RGB Patrones encontrados
• Los números hexadecimales aumentan de 33 en 33
• Los números RGB Aumentan de 51 en 51 en tres canales (c3,c2,c1)
3 2 1

Para la elaboración de la paleta decidí elegir la sucesión de los 216 números RGB
por sobre la Hexadecimal por ser más simple y fácil de comprender.
La sucesión encontrada del RGB Seria la siguiente:
(0, 0, 0) (51, 0, 255)
(0, 0, 51) (51, 0, 204)
(0, ,0 102) (51, 0, 153)
(0, 0, 153) (51, 0, 102)
(0, 0, 204) (51, 0, 51)
(0, 0, 255) (51, 0, 0) etc.

5
Un patrón más simple

Pude encontrar un patrón mas simple al dividir la paleta en 6 partes, de tal manera
que serian 6 cuadrantes de 36 colores.

5 3 1

6 4 2

Con base a esta división pude obtener un patrón mas simple dentro de un cuadro
de 36 colores.

(0, 0, 0) (0, 51, 0)

(0, 0, 51) (0, 51, 51)
(0, ,0 102) (0, 51, 102)
(0, 0, 153) (0, 51, 153)

1 (0, 0,
(0, 0,
204)
255)
(0, 51,
(0, 51,
204)
255)

Etc.

6
Básicamente sería hacer 6 cuadros de 36 con este patrón para no hacer tantos cálculos.

Primero sería hacer 36 cuadros.

variables por utilizar

“x, y” indicar la posición.

“Tamc” el tamaño de cada cuadro

Ciclos
Hacer 6 veces lo de abajo 6x36 = 216

Ciclos para hacer 36 cuadros, llamando

36 veces la función “rectángulo”.

Basar x, y dependiendo de los valores de i, j

Para cada ciclo.

Condiciones para cambiar la

posición de cada cuadrante de 36.
Actualizando x, y en cada ciclo.

Actualizar el valor en “c1”, c1 = RGB

Capturar los nuevos valore
para el nuevo color

Ir a una posición indicada

para centrar la paleta.
Llamado de la función.

Imprimir la sucesión de números

para corroborar.

7
Corriendo el script

5 3 1

6 4 2