tonyfromundefined / placeholder.fromundefined.com

🌈 Default Icon Generator using the Open Color Palette and Pretendard

🌈 Placeholder

by fromundefined.com

Default icon generator using the Open Color palette and Pretendard

• Extract the color by hashing the given string.
• Inserts the initials of the given string into the icon.
• Supports dark mode
• Supports Hangul (Korean Character)
• Caching with Cloudflare CDN (Cloudflare Workers + Cache API)

How to use

Basic

Enter the string needed to express the icon as a path parameter.

https://placeholder.fromundefined.com/[string]

<img src="https://placeholder.fromundefined.com/hello">

Dark Mode

Append ?theme=dark param in url

<img src="https://placeholder.fromundefined.com/hello?theme=dark">

Dark Mode Icon without JavaScript

Using <picture> tag with prefers-color-scheme

<picture>
  <source
    srcset="https://placeholder.fromundefined.com/hello?theme=dark"
    media="(prefers-color-scheme: dark)"
  />
  <source
    srcset="https://placeholder.fromundefined.com/hello"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <img
    decoding="async"
    srcset="https://placeholder.fromundefined.com/hello"
  />
</picture>