選択したカラー・テーマに基づいて、デザインやイラストに最適な色を組み合わたカラーパレットを生成する無料のオンラインツールを紹介します。 操作は快適👍で、超高速🔥! 気になったカラーパレットはすぐに無料でダウンロードでき、さまざまなプロジェクトで使用できます。
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
ロゴやウェブサイトの配色決めにおいては、パーツ単体で見たときに良さそうでもいざ実際に配置してみると「思った感じと違う……」と難航しがちです。そんな時、AIの力でカラーパレットを作成してくれるサイト「Huemint」は自動で良さげな感じに仕上げてくれるうえに、利用する際のイメージを分かりやすいプレビューで用意してくれる非常に便利なサイトということで、実際にその使い勝手を試してみました。 Huemint - AI color palette generator https://huemint.com/ サイトにアクセスするとこんな感じ。「Launch」をクリックします。 するとブランドロゴのページに移動しました。AIの選んだ4色を使った場合のイメージが右側に表示されています。下にスクロールしてみると…… 生成された配色が合成されたイメージ画像が表示され、製品に表示したときのイメージが分かりやす
ウェブには数多くの素晴らしい配色カラーツールがありますが、この記事では、UIデザインに便利なカラーツール7つをご紹介します。 ユーザーインターフェースの色を選択するには、グラフィックデザイン向けプロジェクトとは異なる用意が必要となることに注意しましょう。UIデザインには、さまざまなバリエーションと色を持つ包括的な配色セットが必要なだけでなく、色がユーザークエスペリエンスにどのように影響するのかも検討する必要があります。 デザインにおいてもっとも重要な要素のひとつである「配色」を、見栄えを良くするだけでなく、効果的に選ぶことができるカラーツールをまとめています。 【2021年版】もう配色デザインには迷わない!すごい無料カラーパレットツール83個まとめ UIデザインで重宝する配色カラーツール7個まとめ 1. Accessible color palette builder プロダクトデザインに
テキストを入力すると、Webサイトやスマホアプリ向けの美しいカラーパレットをすぐに生成してくれるAIツールを紹介します。 「企業サイト向けのクールで信頼感のあるカラーで、ベースはホワイト」「子供向けキャンペーンサイト、海と夏のイメージ」こんな感じにテキストを入力すると、Webサイトやスマホアプリ向けのカラーパレットを生成してくれます。 AI Colors AI Colorsの特徴 AI Colorsの使い方 AI Colorsを使ってみた AI Colorsの特徴 AI ColorsはOpenAIのGPT-3.5を使用して、テキストからAIによりWebサイトやスマホアプリ向けの美しいカラーパレットを生成します。また、他の人が作成したカラーパレットを検索・編集・視覚化することもできます。 利用にあたっては無料で、登録なども必要ありません。
デザインをする上で人への印象を左右する「色」の選択は非常に重要ですが、自分の想像の範囲を超えた色の組み合わせを見つけるのは難しいもの。Twitterボットの「@colorschemer」はランダムに色と言葉を組み合わせてカラーパレットを投稿しており、ボットゆえに人が想像しなかった組み合わせを生み出しています。そんな@colorschemerの特に印象的なカラーパレットを色別に探索することができる「colors.lol」が公開中です。 colors.lol - Overly descriptive color palettes https://colors.lol/ 「colors.lol」にアクセスするとこんな感じ。トップページにはさまざまな色の組み合わせがランダムに表示されています。 「desiccant sunflower」(乾燥剤のひまわり)、「fibrillar pinkish o
毎年12月ごろにPantoneから発表されているカラーオブザイヤーですが、2021年は、イエローとグレーの2種類がトレンドカラーとして選ばれました。 今回は、それぞれの色に関する情報や、トレンドカラーを使ったカラーパレットなどをご紹介したいと思います。 2021年のトレンドカラーは2つの色の組み合わせ PANTONEから発表された2021年のカラーオブザイヤーはグレーとイエローの組み合わせとなっていて、5年ぶりに2色が選ばれることとなりました。 それぞれの色の名称は「Illuminating(イルミネイティング)」と、「Ultimate Gray(アルティメットグレイ)」です。 この2色が選ばれた理由には、下記のようなメッセージが込められています。 異なる要素が一緒になりどのように互いを支え合うかに目を向けさせる 実用的で揺るぎないが、同時に暖かく楽観的 強さと前向きさが一つになっている
株式会社アンドパッドでUIデザイナーをしている、よつくらです。 2024年の7月、おそらく3年ぶりにアンドパッドで運用しているデザインシステムの、網羅的なカラーパレットを作成しなおしました。今回、カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だったので紹介します。 網羅的なカラーパレットのコントラスト比を揃える前回カラーパレットを作成したとき、1段階目の網羅的なカラーパレットと、2段階目の意味を持ったカラーパレットを作成しました。そのときの学びは下記のnoteにまとまっています。 1段階目の網羅的なカラーパレットについて、色相の異なる色同士で同じコントラスト比を保っておいた方が、UIコンポーネントを作成するときに便利です。 毎回コントラスト比の計算で悩むのは嫌だ例えば上の図のように、いろいろな色で使えるタグコンポーネントを設計するときのことを考えてみましょう。 こ
WebサイトやスマホアプリのUIにトーンを合わせたカラーを使用すると、デザインに統一感が生まれます。このトーンを合わせたカラーというのは、明度と彩度が一貫されたカラーのことです。 デバイスに依存しない、トーンを合わせたカラーパレットをOKLCH色空間で簡単に作成できる無料ツールを紹介します。RGBやHEX値もサポートしています。 The good colors The good colorsは、OKLCH色空間を使用してカラーパレットを作成できるオンラインツールです。OKLCH色空間とは、明度(Lightness)、彩度(Chrome)、色相(Hue)の値で構成されるカラーで、LCHに比べて色相と彩度の均一性が改善された色空間です。そのため、明度と彩度が一貫された知覚的変化が保証されます。 OKLCH色空間を使用したカラーパレット 使い方は、簡単です。 「Lightness」と「Chrom
当ブログでもいろいろな配色本を紹介してきましたが、今回はイラストやデザインに役立つ魅力的な配色だけでなく、色の組み合わせで世界観を創り出す、カラーパレットを理論的に解説した配色本を紹介します。 まさに、イラストレーターや絵師さんにぴったりな最強の配色本! 眺めているだけでもインスピレーションが刺激され、創作意欲が高まる一冊。 各ページに掲載されている描き下ろしのイラストには、実際に配色が適用されており、イラストレーターさんによると「この組み合わせで、こんなに引き立つのか」「このトーンでまとめると、統一感が出るんだ」と気づきの連続だったそうです。 配色アイデア手帖シリーズ(最新刊の紹介記事)でお馴染みの桜井 輝子氏による、ファンタジーの物語や文学のキーワードを元にした世界観設定にぴったりな配色本です。世界の美しい物語53編から、88項目のテーマと2376の配色見本が収録されたイラスト画集のよ
美しいカラーパレットを生成できるツールはたくさんありますが、配色を探しているときに役立つ便利なオンラインツールCoolorsをご紹介します。 人気トレンドのおしゃれな配色カラーパレットを確認、編集できたり、写真から色を抽出したコラージュの作成、色覚障がい診断ツールの他に、配色の明るさや彩度、色温度なども調整できるなど、配色に必要なあらゆるツールが揃っています。 Coolorsとは Coolorsは、Spaceキーを押すたびに配色をランダムで作成、編集できるオンラインツール。配色に自信がなくても、数千を超える美しい配色カラーパレットからインスピレーションを見つけることもできます。 失敗しない配色えらびに役立つさまざまなツールが同時に公開されている点もポイントです。では、Coolorsの使い方を詳しくみていきましょう。 Coolorsの使い方 Coolorsの使い方は、基本的な2通りとなります
たとえさまざまな配色ツールを利用したとしても、魅力的なカラーパレットが思いつかずに悩んでしまったという経験はないでしょうか。 ひとつの色を選択するだけで、何百種類もの配色カラーパレットを作成できるデザインテクニックが紹介されていたので、今回はご紹介します。 このテクニックを習得しておけば、メインカラーを決めるだけで、自分でも思いつかなかったような配色カラーパレットを直感的にデザインすることができます。 魅力的な配色カラーパレットのつくり方 紹介されている動画では、サンプルとしてAdobe Photoshop CC 2020を利用していますが、カラーピッカー機能があればIllustratorなど他のデザインアプリでも、同じ作業を行うことができます。 まずはツールバーに表示されている描画色をダブルクリックし、カラーピッカーを表示しましょう。 最初に選択する色は、色合いが濃かったり、暗すぎたりし
Blender アドオン プラグイン&アドオン-Plugin&Addon OmniStep v1.0 - スクリプト可能な一人称視点制御を実現するBlen... 2024-09-20 Damjan Minovski氏スクリプト可能な一人称視点制御を実現するBlenderアドオン「OmniStep」が正式リリースされました! 続きを読む トレーラー-Trailer 技術 トレーラー Time Ghost - Unite 2024基調講演に合わせて「Unity 6... 2024-09-19 2024年9月18日から9月20日までの3日間、スペインのバルセロナで開催される「Unite 2024」の基調講演に合わせて、Unity6で制作された最新テクノロジーデモ映像「Time Ghost」が公開されました! 続きを読む
米Adobe Systemsが色生成(カラージェネレーター)技術「Leonardo」をオープンソースとして公開している。ターゲットとするコントラスト比をベースに適応的カラーパレットを作成できるという。 LeonardoはWebサイトや各種アプリケーションに向けたカラーパレットを容易に生成できるツール。Adobeのデザインシステム「Spectrum」の色をベースとし、JavaScriptモジュールとインターフェイスで構成される。 d3-colorを使って構築しており、World Wide Web Consortium(W3C)のWeb Accessibility Initiative(WAI)のウェブアクセシビリティ標準であるWeb Content Accessibility Guidelines(WCAG)をサポートする。WCAGが定義する最小コントラスト比などのアクセシビリティ基準を満た
こんにちは。 GMOペパボ株式会社のハンドメイドマーケットサービス「minne」でデザイナーをしております、sziaoreoです。 前回の記事では「minneのブランドを反映したイラストができるまで」のお話について紹介させていただき、その時「次はカラーパレットについて書くぞ〜」と言ってしまったなぁということを思い出し、書きに参りました。 minne Color(2022年6月時点)ということで、こちらの記事では「サービスのブランドからどのようにカラーパレットを考えたか」 を中心に、カラーパレットの制作過程についてご紹介していきたいと思います。 課題minneが生まれて10年も経ったこともあり、タッチポイントや画面、デバイスによって使用している色がバラバラになっていることがまず1つ目の大きな課題です。故にUIの色数も過多になり、煩雑な印象を与えてしまっていました。 そして2つ目の課題は、各所
イギリス・ロンドンを拠点に活動するアーティストのMatt DesLauriers氏が、「美しい夕日」や「東京のネオン」といった任意のテキストを入力すると、そのイメージに当てはまるようなカラーパレットを生成することができるツールを開発しました。 Artist uses AI to extract color palettes from text descriptions | Ars Technica https://arstechnica.com/information-technology/2022/09/artist-uses-ai-to-extract-color-palettes-from-text-descriptions/ DesLauriers氏は画像生成AIの「Stable Diffusion」を用いて、任意のテキストプロンプトに沿ったカラーパレットを作成することができるツー
デザインの基本となるカラーパレットを自動生成できる「Palettte App」などのツールはデザイナーの強力な味方ですが、自動生成された配色のみでデザインを行うのは非常に困難。重要なのはカラーパレットジェネレーターを使うことではなく、正しいカラーパレットの作り方を身に付けることということで、UIデザインのリファクタリングを支援するRefactoring UIがその手法を解説しています。 Building Your Color Palette https://refactoringui.com/previews/building-your-color-palette/ 例えばカラーパレットジェネレーターを使って以下のような5色のカラーパレットを生成したとします。 生成された5色を用いてUIデザインを行うとこんな感じ。お世辞にも美しいとは言えません。 本当は以下のようなデザインを求めているはず
こんにちは! WebクリエイタースクールデジタルハリウッドSTUDIO by LIGの運営担当の天(@10TEN10TAN10)です! 未経験からデザインを学ぶ中で受講生さんから時折いただくのが「おしゃれな配色ってなんですか?」ということ。 デザインのトレンドは日々変化していきますし、人それぞれ「おしゃれ」の定義って異なりますよね。今日の記事では『配色』を知るためのおすすめツールを紹介をします! デザインの世界に飛び込んでみませんか? 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。デジLIGでは、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と豊富な就職支援が特徴!ぜひ一度詳細をチェックしてみてください 👉「デジタルハリウッドSTUDIO by LIG」詳細へ 👉スクールの概要が詳しく分かる資料の
どうも!LSSです!! 今回はJavaScriptで「4クリックRGBカラーパレット」を作ってみました! 始めからやり直す 使い方 もうすぐ春ですね しかし… 使い方 最初に好きな色のイメージに一番近い色をクリックしてください。 すると、カラーパレットが選択した色を基準に「微妙に違う色」の一覧に変わります。 そこからまた1つ選ぶと「もっと微妙に違う色」の一覧に変わります。 そこからまた1つ選ぶと「更にもっと微妙に違う色」の一覧に変わります。 その中から1つ選ぶと確定。 カラーパレットは最初の状態に戻り、その下に「最終的に選んだ色」が並びます。 もうすぐ春ですね 最初に一番右下の「#C0C0C0」をクリックすると、明るいパステルカラーになります! これからの季節、ブログを彩るのにいかがでしょうか^^ しかし… …正直、自分は3・4回目のクリックの色の見分けがつきませんがwww てなとこで、今
ダークモードなどをサポートしたBootstrap 5.3アルファ1版が登場。新しいカラーパレットも追加 複雑なHTMLやCSSを記述しなくとも、簡単にWebページをデザインできるフレームワーク「Bootstrap」の最新版「Bootstrap 5.3.0アルファ1版」がリリースされました。 Closing out the year with a big new release, v5.3.0-alpha1! Get your hands on the pre-release with color modes, expanded color palette, new utilities, and more! https://t.co/5ZMTGF0FKk Wishing everyone an amazing holiday break and a Happy New Year! Catch
サービスのカラーパレットをバージョンアップさせるべく、デザインシステム「カラーパレット」を調べることになりました。 開発チームからの要望としては「どうせ新しくするなら、漏れのない状態を目指したいね」ということで、iOS/Androidのガイドラインから始めて、話題になっていたAmebaスピンドル、さらに他社のデザインシステムも含めて徹底的に調査しました。 先に調査結果ですが、大枠でまとめるとこのような形となりました。 ・色は、明度差も含めたトーンをパレットとして持っておく ・テキスト表示コントラスト比 4.5 : 1 を準拠させる ・ダークテーマには法則性が多数ある、あらかじめ抑えるべきポイントを抑えてから設計を開始するとはいえ、どのカラーパレット / デザインシステムも非常によくできいます。細部までみると、様々な分岐が見られ全て取り入れたいぐらいです。 それでは調査内容を発表させていただ
2019年9月、Android10とiOS13がリリースされ、「ダークモード(ダークテーマ)」の認知が世間に広まってきました。 そんな中でUIデザイナーは、Webサイトやアプリをダークモード対応させるよう、依頼されるケースが増えてきています。 この記事では、ダークモードのUIデザイン作成に関するコツをご紹介します。 そもそも、ダークモードとは? ダークモードとは、最低限のカラーコントラスト比を確保しつつ、デバイススクリーンからの発光量を削減する機能です。ダークモードに設定すると、「暗いカラー」と「明るいカラー」の要素が入れ替わります。 ダークモードにより、以下のメリットが期待できます。 目の疲れを軽減させる 暗い環境でもスクリーンを見やすくする ユーザーの好みに合わせてカスタマイズされたUXを提供できる 「光に対して繊細な人」にも便利なユニバーサルデザインを提供できる バッテリーの消費量を
また、「フォントの再編集」も加わった。写真などで気になったフォントやアウトライン化されたベクターテキストをIllustratorに取り込み、フォントの再編集を選択すると、Adobe Fontsに収録されたものから最も近いフォントを教えてくれる。そのまま適用して画像/イラスト内のテキストを編集できる。 画像トレースの機能も強化された。ラスター(ピクセル)画像からベクターへの画像変換において、自動検出モードを実装した他、画像トレースプリセットを選択して、処理から除外するカラーを選択したり、カラーモードをカスタマイズできるようになったという。読み込んだ画像から最適なプリセットを提案する機能も搭載している。 その他、レイヤーパネルに「検索」と「フィルター」パネルを追加した他、WebP形式による書き出しをサポート。スクリーン用書き出しで、JPEGのカラーモード(RGB、CMYK、グレースケール)を選
2023年1月29日 便利ツール, 色彩 配色ってなかなか思った通りのイメージにならず、難しいと感じる方も多いでしょう。そこで今回は、AIでオリジナルのカラーパレットをつくれるサービスColorMagicを紹介します。キーワードからかんたんに配色を生成してくれますよ! ↑私が10年以上利用している会計ソフト! ColorMagicを使ってみた ColorMagicのWebサイトの「パレットをつくる」ボタンから始めましょう。日本語で利用できるのが嬉しいですね!入力欄に作成したいイメージを入力します。ここではヨガと入力してみました。「生成する」ボタンをクリック。 いい感じに配色が提案されました!「同じワードで再生成」ボタンから別の配色を提案してもらえます。ただしアカウントを作成しない場合は3回まで。色の調整や保存もアカウント登録が必要です。 アカウントを作成すると、毎日10回まで無料で配色の生
Sorted CSS Colors https://enes.in/sorted-colors/ Sorted CSS Colorsの特徴 「Sorted CSS Colors」は、background-colorなど、Webでそのまま使えるCSS色名でソートされたカラーパレットです。 つまみレンジをぐりぐり動かすことで 様々なカラーパターンを確認することが可能。 そして特徴とも言えるのが、パレット上に表示された色名は、background-colorなどCSSでそのまま使うことができる点です。 隣り合う色相も分かるので、ノンデザイナーでも配色に困らないのはありがたいかぎり。 もちろん、RGBやカラーコードなど、カラーパレットとしての標準機能もちゃんと装備されています。 Sorted CSS Colors https://enes.in/sorted-colors/
エクサウィザーズでAIプロダクトのUI/UXデザイナーを担当している吉田です。今回は自社のデザインシステムの一部である「カラーパレット」をどうやって作り上げていったかについて、ご紹介します! 自社が必要とするカラーシステムとはどのようなカラーシステムを作り上げるかは、そのデザインシステムの対象によって異なります。 例えば、 Adobe のアプリケーションを対象とした Spectrum デザインシステムは、ユーザーがインターフェースのテーマを変更できる機能に対応するため、 2つの明るい色と2つの暗い色の4つのカラーテーマを持っており、そのテーマ毎にカラーパレットが定義されています。 出所: Color - Stectrum を元に筆者作成LINE の場合は、ブランド体験に直接的な影響を与える主要なUIに使う Primary Color Palette の他に、付加的な要素に使用する Rain
こんにちは。トビ(@0b1tk)です。初めてZennに投稿します! サイボウズの自社製品「kintone」のデザインシステムを開発・運用するチームで、デザインテクノロジストとしてお仕事をしています。 私たちのチームでは、デザイントークンを「Tokens Studio for Figma」というFigmaプラグインで管理しています。また、デザイントークンやコンポーネントなどをStorybookでドキュメント化しており、カラーにまつわるデザイントークンをまとめたページを社内向けに公開しています。 今回は、StorybookのDoc blocksの「ColorPalette」を使って、デザイントークンを型安全に埋め込んだカラーパレットを作る方法をご紹介します! カラーパレットの完成形 完成したカラーパレットは、HEX 値を直接入力するのではなく、Tokens Studioで管理しているデザイント
迷わず決定 Adobeの配色カラーパレット、アイデア101個 90年代「昭和レトロ」など11スタイルから選べる 使いやすくセンスのいい配色101パターン デザインで配色えらびが重要なのは分かっているが、いつも迷って時間がかかるという人も多いでしょう。 この記事では、時短にも役立つAdobeの配色アイデア101個をご紹介します。 人気の「90年代レトロ」や「ネオンライト」、オシャレな「シンプル&ナチュラル」など、さまざまなデザイン案件に適した、101の色の組み合わせが提案されています。 気に入った配色を見つけたら、そのままAdobe Expressで編集することもできます。 コンテンツ目次 1. 控えめなパステルカラー 2. クリーン&モダン 3. 光沢メタリック 4. 鮮やかネオン 5. デュオトーン&モノクロ 6. ナチュラル&オーガニック 7. 控えめなパステルカラー 8. クリーン&
PagesやKeynote、様々なサードパーティアプリにドラッグ&ドロップでカラーを適用できるカラーパレット「Pastel」のMac版がリリースされています。詳細は以下から。 iOSやiPadOS、tvOS、macOSにも対応したポッドキャストアプリ「Broadcasts」を開発しているSteve Troughton-Smithさんは現地時間2020年07月13日、PagesやKeynote、その他様々なサードパーティアプリにドラッグ&ドロップでカラーを適用できるカラーパレットアプリ「Pastel for iOS/iPadOS」をMac CatalystでMacへ移植したと発表しています。 Surprise! If you previously purchased Pastel for iPhone or iPad, you now own the Mac version for free
投稿日:2019/11/24 最終更新日:2021/09/16 2019年度のコフレ第2段です~。これとは別にあと1つ買いました! このイプサのコフレは買うつもりなかったし、気にもしていなかったのですが美容液スティックを買うときに試してくれて、気に入って買ってしまいました。 フェイスパレットとリップ、マスカラのセットなのですが長くなるので今回はパレットについて書きます。リップとマスカラは次の記事にて! ★★★ →骨格タイプ診断はこちら →骨格ストレート情報のTwitterはこちら →骨格タイプ別のお洋服紹介はこちら ★★★ イプサ ホリデーコレクション2019 【内容】 ・フェイスパレット ・リップグロス ・マスカラ のセットです。 全部限定色です。 【価格】 7700円(税抜き) 限定じゃないイプサのフェイスカラーパレットが、5800円(税抜き)なんですね。 なので2000円くらいでリッ
キーワードを入力するとAI(人工知能)がカラーパレットを生成してくれるWebサービス「ColorMagic」がリリースされ、「めちゃくちゃ便利」「仕事に使えそう」とTwitterで注目を集めています。 ColorMagic(画像提供:野崎智弘/@nztm_twさん) 作者は、野崎智弘さん(@nztm_tw)と、三橋優希さん(@YukiMihashi)。話題のチャットAI「ChatGPT」(関連記事)を開発したAI研究の非営利団体・OpenAIのAPIを利用し、約1週間で制作したとのこと。 ColorMagicの使い方は、「パレットをつくる」から色の雰囲気やイメージを入力するだけ。「紅葉」「チョコレート」といった比較的イメージしやすいカラーパレットはもちろん、「さわやかな夏」「キュート」などのキーワードからも“それっぽい配色”を一瞬で生成してくれます。 キーワードから瞬時にカラーパレットを生
こんにちは、デザインG の @degudegu2510 です。 本日はQiitaのカラーパレットを変更したことについてお知らせします! Qiita運営メンバーでは、「エンジニアを最高に幸せにする」というMissonを達成するため、日頃からアクセシビリティ改善の議論を重ねています。 今回は、Qiitaのアクセシビリティの課題の1つである、「WCAG 2.1 1.4.3:コントラスト(最低限)」 の解決に向けての第一歩であるカラーパレットの変更を行いました。 新しいカラーパレット QiitaのUIでは、背景色に以下の4色が使われています。 ライトテーマの背景色: #FFFFFF・#F5F6F6 ダークテーマの背景色: #1d2020・#2f3232 これらの背景色上にコントラスト比 4.5:1 以上になる色を、各テーマ・各階調 4色以上確保できるように以下のようなカラーパレットを作成しました。
デザインにおいて誰もが悩む配色、そんな時に便利なのがカラーパレットを活用すること! 配色のアイデアは、いろんなところから入手することができますが、これまたトリッキーで時間のかかる作業であることは間違いありません。 そこで、今回はDesign Cutsで人気のデザイナーに、お気に入りのカラーパレットの作成を依頼し、計9つのカラーパレットを特別に無料で配布しちゃいます! この機会にぜひ、おしゃれな配色カラーパレットを無料でダウンロードして、大切な作業時間を少しでも節約してください! Lisa Glanzのプレイフルパレット Lisa Glanzのお気に入りの組み合わせは、マスタード、ブラウン、クリームピンク、ブラッシュ、ミント。70年代の優しく懐かしい雰囲気はみんなも大好きなはず。
イントロ 皆さんこんにちは。デザインチームの和田と申します。 Social Databank Tech Blog Advent Calendar 2023の8日目です。 どんな規模の開発であれ、UIのデザインする中で灰色というのはとにかく種類が増えやすく、管理が大変ですよね。 薄い、普通、濃いの3色だけだと足りない、しかしデザインシステムを参考しようにもパレットには10色以上用意されておりどう使えばいいか分からない、という方も多いのでは無いでしょうか。 デザイン庁デザインシステム Sumiより 13色用意されています そもそもなぜ灰色は増えてしまうのか? よくある決め方として、テキスト用、枠線用、hover用...と用途別に決めていく方法があるかと思います。しかしこの決め方はあまりおすすめしません。Componentは機能拡張とともに増えますし、同じテキストでもここは濃く、ここは薄くしたい
どうも!LSSです!! がっつりとした記事を書きたいと思いつつも、なかなか余裕のない今日この頃w 以前書いた記事の「迷路の舞台裏!(JavaScriptで迷路を書き出す方法)」で、innerHTMLでtableタグを書き出す方法を書いていました。 が、レイアウトはCSS任せな昨今、tableタグよりCSSで実現する方法があるのでは?と調べてると、HTML4.0時代からのブランクの間に、flexという方法が出てきて、さらにgridレイアウトという方法になっていってる(が、IEがついていってない)みたいなインプットがありました。 まだ試せてないんですけどねw さてそんな中、今日は過去記事「HSL版カラーパレット」にちょっとだけ、機能付与してみました。 ↑こーんな感じ。 この、マーカー風に色をつけるのは、されている方は結構みかけるのと、見栄えがだいぶ楽しくて、「色を簡易に試せるカラーパレットと相
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く