The color of water

On September 14th I spent 3 hours immersed in Latin America's biggest aquarium1, note 1. Amidst the learnings of biology and geography, I was enthralled by the colors of underwater life.

I was with friends, on a trip, and it was supposed to be 100% a leisurely time, so I felt a little uneasy about thinking of color spaces and design there and then. Nevertheless, the possibilities kept coming. And since they did, I might as well share.

These palettes were not built by simply extracting colors from pictures with a plugin or dropping the eyedropper tool. I had a lot of fun watching out for luminosity, tone and treating each minute I spent oozing over a tank as some sort of meet and greet — imbuing personality in the examples built for each palette.

I will probably indulge in writing a making-of at some point, but for the sake of brevity I will let you enjoy the palettes now. You can choose to copy the colors as oklch

Idea

Inspired by Batoideias, or rays. Em português, Raia.

Photo by John Norton, CC BY 2.0, via Wikimedia Commons

CopyCopiedCopyCopiedCopyCopied

Copy paletteCopied

Raya Baitoi

Chief Executive Officer

3 unread

glide.cppc++

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9

enum class Glide {
  Flap,
  Drift,
};

Glide ray(int beat) {
  return beat > 3 ? Glide::Drift
                  : Glide::Flap;
}

++++

execute

▼

execute

▼

execute

Patela

Inspired by Paracanthurus hepatus, or Blue Surgeonfish. Em português, Cirurgião Patela.

Photo by DerHans04, CC BY-SA 3.0, via Wikimedia Commons

CopyCopiedCopyCopiedCopyCopiedCopyCopied

Copy paletteCopied

Blue Surg

DevRel

4 unread

tank.blade.phpblade

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10

<flux:card>
  <flux:heading>Tank</flux:heading>

  <flux:input
    wire:model.live="species"
    label="Species"
  />

  <flux:button>Save</flux:button>
</flux:card>

++++

Empathy

Focus

Impute

Caranx

Inspired by Caranx, or Jacks, or Kingfishes. Em português, peixes-reis, Xaréu.

From a public domain plate, via Wikimedia Commons

CopyCopiedCopyCopiedCopyCopiedCopyCopiedCopyCopied

Copy paletteCopied

Jackie

Chief Engineering Officer

5 unread

caranx.rsrust

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9

struct Jack {
    speed: f32,
}

impl Jack {
    fn chase(&self) -> f32 {
        self.speed * 1.4
    }
}

++++

• school/
• ├─ caranx.rs
• └─ shoal.rs
• Cargo.toml

Idol

Inspired by Zanclus cornutus, or Moorish Idol. Em português, Ídolo Mourisco.

Photo by Diego Delso, CC BY-SA 4.0, via Wikimedia Commons

CopyCopiedCopyCopiedCopyCopiedCopyCopied

Copy paletteCopied

Zaya Idol

Chief Design Officer

4 unread

idol.csscss

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10

.idol {
  --band: oklch(0.93 0.19 103);
  --ink: color-mix(in oklch,
    var(--band) 60%, black);
  background: linear-gradient(
    105deg, var(--band), #fff);
  color: var(--ink);

  &:hover { --band: #ffd400; }
}

++++

• [x]build, done
• [ ]curate, still open

Volitas

Inspired by Pterois volitans, or Lion Fish. Em português, Peixe-Leão.

Photo by Michael Gäbler, CC BY 3.0, via Wikimedia Commons

CopyCopiedCopyCopiedCopyCopiedCopyCopiedCopyCopied

Copy paletteCopied

Leon Volita

VP of Product

5 unread

lionfish.rbruby

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9

class Lionfish < Fish
  scope :venomous, -> {
    where("spines > ?", 12)
  }

  def flare
    fins.sum(&:span)
  end
end

++++

20252026

store8,200↗12,400

docs5,100↘4,100

dashboard640↗860

Pink Moon

Inspired by Drymonema larsoni, or Pink Meanie. Em português, Água Viva.

Photo by Liza Gomez Daglio, CC BY-SA 4.0, via Wikimedia Commons

CopyCopiedCopyCopiedCopyCopied

Copy paletteCopied

Larson Dry

Personality Hire

3 unread

field-notes.mdmarkdown

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8

# Pink Moon

A *drifting* bell, **8** arms.

- [x] log the bloom
- [ ] tag the shoal

> found at 40 m

++++

--d --h --m

until offsite

---

I feel like there is a lot more to touch here. The textures of the various species, the ebbs and flows of algae, the patterns of cnidaria. Biomimetics2, note 2 is not a foreign concept to design, but I have been feeling more and more that UI, UX, product, or however you call it, is in deep need of relationships with other mediums. Maybe this will be my next one.

For now, these palettes are all the exploration I have done. To display them I made use of the Markdown Graph library, HTML code and pre elements empowered by highlight.js for syntax highlighting, and Base UI components powered with Tailwind.