CSSで最近よく使うOKLCHカラーについて理解を深めよう、異なる色でトーンを合わせたり、単色のシェードも簡単
CSSでは、さまざまなカラーモデルで色を設定できます。16進数によるHEX値、rgb()によるRGB値、hsl()によるHSL値、lab()によるLAB値、oklch()Oklch値、oklab()によるOklab値など、現在ではすべてのブラウザにサポートされています。 中でも最近では、トーンを合わせたカラーを簡単に作ることができるOKLCHカラーの人気が高まっています。このOKLCHカラーについて紹介します。 oklch.fyi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 OKLCHカラーとは カラーモデルとは 色域とは OKLCHの構造 OKLCHだと明るさの一貫性が簡単 OKLCHだとシェードも簡単 OKLCHだとグラデーションも美しい カラースペースのサポート 最大彩度 ブラウザのサポートとフォールバック OKLCH
A perceptual color space for image processing
From personal project to industry standard Introduction added in 2025 When introduced Oklab in 2020, I never expected it to reach as far as it has. In a few years Oklab has, among other things, found its way into: Photoshop – Now the default interpolation method for gradients Web browsers – Part of CSS Color Level 4 and 5, supported by major browsers Game engines – Used in Unity’s gradients and Go
Lab色空間 - Wikipedia
CIE 1976 (L*, a*, b*) 色空間 (CIELAB) を上から見た図 CIE 1976 (L*, a*, b*) 色空間 (CIELAB) を正面から見た図 CIE 1976 (L*, a*, b*) 色空間 (CIELAB) のうち、sRGBの色域に収まる範囲（当時の一般的なコンピュータのディスプレイに表示できる範囲）だけを示した図。それぞれの軸は -128 から 128 の範囲である。 Lab色空間（エル・エー・ビーいろくうかん、英: Lab color space）は補色空間の一種で、明度を意味する次元 L と補色次元の a および b を持ち、CIE XYZ 色空間の座標を非線形に圧縮したものに基づいている。 Hunter 1948 L, a, b 色空間の座標軸は L、a、b である[1][2]。しかし最近では CIE 1976 (L*, a*, b*) 色空間の
OKLCH Color Picker & Converter
OKLCH is a new way to encode colors (like hex, RGBA, or HSL)
カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だった｜よつくら
株式会社アンドパッドでUIデザイナーをしている、よつくらです。 2024年の7月、おそらく3年ぶりにアンドパッドで運用しているデザインシステムの、網羅的なカラーパレットを作成しなおしました。今回、カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だったので紹介します。 網羅的なカラーパレットのコントラスト比を揃える前回カラーパレットを作成したとき、1段階目の網羅的なカラーパレットと、2段階目の意味を持ったカラーパレットを作成しました。そのときの学びは下記のnoteにまとまっています。 1段階目の網羅的なカラーパレットについて、色相の異なる色同士で同じコントラスト比を保っておいた方が、UIコンポーネントを作成するときに便利です。 毎回コントラスト比の計算で悩むのは嫌だ例えば上の図のように、いろいろな色で使えるタグコンポーネントを設計するときのことを考えてみましょう。 こ
数式向けOpenTypeフォントの旅2025年春
はじめに 近年，高品質かつフリーで使えるフォントが増えています． フォントを開発・公開していただいている方には感謝してもしきれません． 特にここ数年では数式向けOpenTypeフォントがかなり充実してきました． （Beamerはもちろん）Typstでのスライド作成において，数式フォントにこだわりたい私にとって非常にありがたいことです． そこで，本記事では数式向けOpenTypeフォントをまとめます． ここでは，TeXLive2025に収録されているフォント (find /usr/local/texlive/2025/texmf-dist/fonts/opentype -type f -name "*[mM]ath*" によって抽出されたフォント) を対象にして，Typstでスライドを作ってみます．（スライドの本文のフォントはRobotoとNoto Sans JPです） ぜひみなさんもお気に
「デザイナーこそ、スプレッドシートに強くなれ」の意味するところ｜鷹野 雅弘
「デザイナーこそ、スプレッドシートに強くなれ」とずっと言い続けています。先日、とあるセミナー（#D2デザインダンジョン）で発したところ、「具体的にはどういうことでしょうか？」と質問いただきました。 よい機会なのでまとめてみました。重要なのは、スプレッドシートは数字はもちろんだけど、数字以外でも使いますよね、ということです。 なお、この記事では、次をまとめて「スプレッドシート」と記します。 Excel（デスクトップ版、オンライン版） Google スプレッドシート スプシ 表計算 Apple Numbers 「スプシ」という言葉には、なかなか慣れません… スプレッドシートは「思考の道具」である私自身、「マインドマップ」はよく使います。 マインドマップは思考を“発散”するには向いていますが、“収束”には不向き。たとえば、異なる“枝”のアイテムの関係性を表現できません。 詳しくは、こちらの記事に
Fontビギナーズガイド3 「エレメント」
フォントメーカーのモリサワが、フォントの基礎知識をレクチャーするシリーズ。今回はフォントのデザインを左右する要素「エレメント」について解説します。 前回の記事では、「ゴシック体と明朝体」について解説しました。 ゴシック体と明朝体の違いについては、もう完璧！ そう思っても、いざフォントを並べてみると、どう選んでいいのかわからない…と困った経験はありませんか？ 一口にゴシック体・明朝体といっても、さまざまな種類があります。その中から、どのように制作物にフィットするフォントを選んだらよいのでしょうか。 そんな時は、フォントの細部である「エレメント」に注目してみましょう。 まずは、エレメントについて見ていきましょう。 1. エレメントって何？ 一書体に共通した「とめ」「はね」「はらい」などの各パーツのデザインのことを「エレメント」といいます。 フォントが見る人に与える印象は、 線の先が丸ければやわ
ゴナ、ナールの作者の中村征宏さん✕フォントダス対談 | FONTDASU.COM
今回、ゴナやナールの作者である中村征宏さんとお近づきの機会をいただきましたので、長年中村さんのファンである私が、色々聞きたいことを質問して答えていただこうと思っています。 中村征宏さんをご存じない方にどんな方なのかご説明しますと、「ゴナ」というモダンゴシック体のパイオニア的書体があるのですが、それをデザインされた方です。あとナールという丸ゴシック体もデザインされています。ナールは、雑誌アンアン等で使われて一世を風靡した書体で、当時の女子はナールを真似て丸文字を描く人が多かったと聞きます。ゴナもナールも写植専用書体だったので、デジタルフォント化されておらず、今では同じモダンゴシックでゴナに似ている「新ゴ」というフォントの方が、デザインをやられている方はもちろんのこと、フォント好きな人はだいたい知っている
Adobe Fontsに新しいパートナー「白舟書体」、「ムーロンタイプ」のフォントをはじめ、FONT1000からも多数の魅力溢れる日本語フォントが追加されました
Adobe Fontsに新しいパートナー「白舟書体」、「ムーロンタイプ」のフォントをはじめ、FONT1000からも多数の魅力溢れる日本語フォントが追加されました 文字に豊かな表現力を与えるフォントは、クリエイティブには欠かせない道具のひとつです。 今回、Adobe Fontsに新しいパートナー「白舟書体」や「ムーロンタイプ」のフォントや、FONT1000からも多数の魅力溢れる日本語フォントが追加されましたのでご紹介します。 新たなパートナー「白舟書体」から9書体が追加 白舟書体からは伝統的な楷書体の筆文字に加え、デザイン筆文字シリーズなど9書体が追加されています。 デザイン筆文字から生まれたポップ体や、端正な姿勢の楷書体や篆書体。優雅な曲線の本格草書体、古くから印鑑などに使用されている印章店だからこその篆書体など、個性豊かで非常に魅力的なラインナップが揃っています。 HOT-白舟楷書教漢
Typography terms and definitions.
「 From alternates to X-height, this list of typography terms and definitions covers just about everything you’d want to know about fonts and typography. 」 Jump to: A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, R, S, T, U, V, W, X. A Accents. See Diacritics Alternates. Different shapes (or glyphs for the same character in a typeface, for example small caps, swash characters, contextual alternates
CSS Inline Layout Module Level (Edior's Draft)
CSS Inline Layout Module Level 3 W3C Working Draft, 18 December 2024 More details about this document This version: https://www.w3.org/TR/2024/WD-css-inline-3-20241218/ Latest published version: https://www.w3.org/TR/css-inline-3/ Editor's Draft: https://drafts.csswg.org/css-inline-3/ Previous Versions: https://www.w3.org/TR/2020/WD-css-inline-3-20200827/ https://www.w3.org/TR/2020/WD-css-inline-3
How to Tame Line Height in CSS | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. In CSS, line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height, we might think about the concept of leading from print design — a term, interestingly enough, that comes from literally putting pieces of lead b
PostScript、デジタルフォント、InDesign 日本語DTPを当たり前にしたアドビの技術 (1/5)
2022年3月27日、アドビの日本法人がいよいよ30周年を迎える。30年間を振り返る記念コンテンツとして私が最初に書きたかったのは、自身も関わってきた紙雑誌の制作を支えたDTP（Desktop Publishing）についてだ。当時の月刊ASCIIをあさり、「革命」とまで言われたDTPの最前線を日本市場に持ち込んだアドビの3人に当時を振り返ってもらうと、今で言う「DX」のような巨大な基盤変革が業界全体で起こっていたことを肌で感じることができた。 すべてはPostScriptから始まった 「アドビ」という社名から、多くの人が連想するのはフォトショ（Adobe Photoshop）やイラレ（Adobe Illustrator）といったいわゆるクリエイティブツールであろう。しかし、1982年に設立された米国のアドビ システムズで創業者が最初に手がけたのは、高精度な印刷を可能にするページ記述言語「
仕事早っ！！ オープンソースになったMORISAWA BIZ UDゴシックのプログラミング用合成フォント「UDEV Gothic」がリリース
昨日当ブログで紹介した「MORISAWA BIZ UDゴシックとUD明朝がオープンソースになったぞ！！」のMORISAWA BIZ UDゴシックを使用したプログラミング用合成フォントが早くもリリースされたので、紹介します。 UDEV Gothic -GitHub 作者の方によると、昨日から衝動的に作成しはじめ、本日v0.0.2がリリースしたとのことです。v0.0.2では全角スペース可視化、異体字シーケンスに対応しており、今後は半角ゼロをスラッシュ付きにするなどが予定されています。 【追記: 2022/3/24】 リガチャに対応したv0.0.3がリリースされました。 ユニバーサルデザインなBIZ UDゴシックと、開発者向けフォント JetBrains Mono を合成したフォント『UDEV Gothic』 全角スペース可視化、異体字シーケンスに対応した v0.0.2 をリリースしました🎉h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Harmonizer
この冷蔵庫に入っているものは全部この方のデザインなのだ「すごい、見たことあるやつばっかり」佐藤卓展が話題
FONTDASU.COM
The History of Blackletter Calligraphy - Jake Rainis
めっちゃ読みやすいモリサワの「BIZ UD」フォントが「GitHub」に／縛りの比較的緩い「SIL OFL- 1.1」ライセンスでカスタムフォントのベースにピッタリ？【やじうまの杜】
