Foro de elhacker.net

 Hola a todos,hoy en mi secundaria nos pidieron (como prueba final)hacer un círculo cromático usando css.La verdad no tengo ni idea de como poder hacer esto y ya probé de todo.  :(

Les agradecería mucho pero mucho si me dan una ayuda.


Gracias de antemano.

Puedes usar múltiples triángulos del mismo tamaño pegados entre ellos para formar un círculo. Cada uno de un color. Después le metes un círculo del color del fondo en el centro para transformar los triángulos en cuadriláteros.
 Te dejan usar svg para hacer los triángulos? Y javascript para eventos? Yo te recomendaría 100% svg, porque es sencillo y te permite control absoluto de todo. Pero entiendo que si el ejercicio tiene el objetivo de mejorar y comprender las posibilidades de CSS tenga que ser 100% css. Entonces:
Opción1: Radial Gradients (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
Opción2: Triángulos y círculos (https://www.w3schools.com/howto/howto_css_shapes.asp)
Opción3: Gradientes y semicírculos (https://css-tricks.com/conical-gradients-css/)

Debe haber cientos de formas distintas de hacerlo. Por ejemplo se te puede ocurrir alguna como usar una imagen y el elemento area de html para separar los colores por píxeles xD
https://www.w3schools.com/html/html_images_imagemap.asp

Organización de los colores (https://www.w3schools.com/colors/colors_wheels.asp)

Yo también tuve una tarea similar, el objetivo del profesor era aclarar el tema de los colores RGB, CMY y las relaciones entre ellas como son: colores complementarios u opuestos:

<div class="croma"></div>
 
<style>
  .croma {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(red, yellow, green, cyan, blue, magenta, red);
  }
</style>

(https://i.ibb.co/w48tq8s/cromatico.png)

- Como se puede apreciar, se ven claramente los colores RGB (Red, Green y Blue | Rojo, Verde y Azul), también se ven claramente en medio de estos los colores CMY (Cyan, Magenta y Yellow | Cian, Magenta y Amarillo)

- Además se pueden ver claramente los colores complementarios u opuestos, por ejemplo el opuesto a Rojo es Cyan, esto implicaría que aumentar la cantidad de Rojo disminuiría la cantidad de Cyan y viceversa. Esto es útil cuando se trabaja con retoque fotográfico a imágenes que tengan mucho o poco de un color.

Hay otros modelos y formas de representar el círculo cromático, dependerá de como lo quiera ver tu profesor.

Lamentablemente conic-gradient sigue estando en draft y firefox por ejemplo no lo implementa. Mientras tanto Lea Verou (que fue la que propuso desde un principio el gradiente conico), deja un polyfil.

https://projects.verou.me/conic-gradient/

Aquí hay mucha m explicada xD

https://css-tricks.com/conical-gradients-css/

Saludos