Chromesthesia Website Project

Inspiration

This project was inspired by the idea that our senses do not always operate independently. While researching perception, we came across chromesthesia, a type of synesthesia where people associate sounds with colors. The idea that a musical note or sound could trigger a visual color response was fascinating to us because it connects science, psychology, and visual design. As designers, we were interested in how something invisible like sound could be translated into something visual and interactive.

What We Learned

Through this project we learned that perception is highly subjective. In chromesthesia, two people might hear the same sound but visualize completely different colors. This showed us that there is no single correct mapping between sound and color, and that designing an experience like this requires interpretation and experimentation. We also learned more about how designers can represent abstract concepts through interaction and motion rather than only static visuals.

We also explored how sound properties can be represented mathematically. For example, sound frequency is measured in Hertz (Hz), which represents the number of wave cycles per second:

$$ f = \frac{1}{T} $$

where ( f ) is frequency and ( T ) is the period of the sound wave.

Similarly, digital color on screens is commonly represented using the RGB model:

$$ C = (R, G, B) $$

where ( R ), ( G ), and ( B ) represent the red, green, and blue values used to produce a color.

How We Built the Project

We built a website that explores the relationship between sound and color. The interface allows users to interact with sounds and see colors appear or change in response, simulating the idea of chromesthesia. We started by sketching concepts for how sounds might visually behave on screen. After that, we developed a visual system where different sound characteristics such as pitch or intensity would correspond to different color shifts or movements.

One simple conceptual mapping we explored was connecting sound frequency to hue values in a color system:

$$ H = k \cdot f $$

where ( H ) represents hue, ( f ) represents sound frequency, and ( k ) is a scaling constant used to keep values within a visible color range.

We then implemented these ideas into the website using interactive visual elements and animation so the experience felt dynamic and immersive.

Challenges

One of the biggest challenges was deciding how to translate sound into color in a way that felt meaningful. Because chromesthesia varies from person to person, there is no universal rule for what color a sound should produce. This meant we had to balance creativity with logic when designing the system.

Another challenge was making the website visually engaging without making it overwhelming. Since the project involved color, motion, and interaction, it was easy for the interface to become visually chaotic. We had to carefully refine the visuals so the experience remained clear and enjoyable.

Reflection

Overall, this project helped us think about design in a more experimental and interdisciplinary way. It showed us how design can communicate sensory experiences that are normally internal and invisible. By combining research, visual design, and interaction, we were able to create a website that explores how sound and color can intersect in unexpected ways.## Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Squircle

Built With

Share this project:

Updates