画像を配置するときに縦と横の長さのバランスに悩むことが多いので、よく使われている比率をまとめます。
約5:8(1:1.618)黄金比

約5:7(1:1.414)白銀比

2:3

3:4

9:16

webデザイン関連の備忘録
画像を配置するときに縦と横の長さのバランスに悩むことが多いので、よく使われている比率をまとめます。





配色に悩んだとき用。「Color List」はカラーコードをクリックでコピー。「Color Block」は色の部分をそのままクリックすればカラーコードをコピーできます。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur.
| P-1 | ORCHID PINK | 薄紅(うすくれない) | #F67599 | |
| P-2 | CORAL PINK | 珊瑚色(さんごいろ) | #F890A5 | |
| P-3 | SHELL PINK | 桜貝(さくらがい) | #FFA38B | |
| P-4 | NARCISSUS | 水仙(すいせん) | #F6EB61 | |
| P-5 | LETTUCE GREEN | 若菜色(わかないろ) | #6CC24A | |
| P-6 | ICE GREEN | 薄浅葱(うすあさぎ) | #49C5B1 | |
| P-7 | AQUA | アクア | #5BC2E7 | |
| P-8 | FORGET ME NOT BLUE | 忘れな草色 | #6CACE4 | |
| P-9 | LILAC | ライラック | #A77BCA | |
| P-10 | PIGEON GRAY | 鳩羽色(はとばいろ) | #888B8D |
| V-1 | CHERRY RED | チェリー | #C8102E | |
| V-2 | TANGERINE ORANGE | 蜜柑色(みかんいろ) | #FF671F | |
| V-3 | DANDELION | 蒲公英(たんぽぽ) | #FFD100 | |
| V-4 | SHARTREUSE GREEN | シャルトルーズグリーン | #C4D600 | |
| V-5 | PARROT GREEN | パロットグリーン | #009639 | |
| V-6 | PEACOCK BLUE | ピーコックブルー | #006272 | |
| V-7 | KING FISHER | 川蝉色(かわせみいろ) | #004B87 | |
| V-8 | LAPIS LAZULI | ラピスラズリ | #06038D | |
| V-9 | IRIS VIOLET | 菖蒲色(あやめいろ) | #440099 | |
| V-10 | IVORY BLACK | 黒 | #2D2926 |
| D-1 | CRIMSON | 臙脂色(えんじいろ) | #8F3237 | |
| D-2 | CHESTNUT BROWN | 栗色(くりいろ) | #6B3529 | |
| D-3 | AUTUMN LEAF | 枯葉色(かれはいろ) | #91450B | |
| D-4 | MAPLE SUGER | 銀煤竹(ぎんすすたけ) | #A07400 | |
| D-5 | OLIVE YELLOW | オリーブイエロー | #9A9500 | |
| D-6 | ELM GREEN | 鶯色(うぐいすいろ) | #56621D | |
| D-7 | FOREST GREEN | 千歳緑(ちとせみどり) | #275D38 | |
| D-8 | MIDNIGHT BLUE | 青褐(あおかち) | #003B5C | |
| D-9 | MULBERRY | 紫紺(しこん) | #221C35 | |
| D-10 | TAUPE | 土龍色(もぐらいろ) | #63666A |
| P-11 | ROSE PINK | 撫子色(なでしこいろ) | #F8A3BC | |
| P-12 | APRICOT | 杏色(あんずいろ) | #FFC27B | |
| P-13 | GAMBOGE | 梔子色(くちなしいろ) | #FFC56E | |
| P-14 | STRAW YELLOW | 麦藁色(むぎわらいろ) | #FAE053 | |
| P-15 | SPRING GREEN | 萌葱色(もえぎいろ) | #A4D65E | |
| P-16 | MINT GREEN | 薄荷色(はっかいろ) | #71CC98 | |
| P-17 | TURQUOISE | ターコイズ | #2AD2C9 | |
| P-18 | CELESTE BLUE | 天色(あまいろ) | #62B5E5 | |
| P-19 | HYACINTH | ヒアシンス | #5C88DA | |
| P-20 | CROCUS | クロッカス | #AD96DC |
| D-11 | PLUM | 李色(すももいろ) | #80276C | |
| D-12 | MAROON | 蘇芳色(すおういろ) | #782F40 | |
| D-13 | TERRA COTTA | 土器色(かわらけいろ) | #963821 | |
| D-14 | BAMBOO | 枯竹色(かれたけいろ) | #D57800 | |
| D-15 | MUSTARD | 芥子色(からしいろ) | #AC8400 | |
| D-16 | MOSS GREEN | 苔色(こけいろ) | #8F993F | |
| D-17 | CACTUS GREEN | 仙人掌(さぼてん) | #67823A | |
| D-18 | SPRUCE | 針樅色(はりもみいろ) | #004E42 | |
| D-19 | TEAL BLUE | 真鴨色(まがもいろ) | #004F59 | |
| D-20 | INDIGO | 濃藍(こいあい) | #001E60 |
| LG-1 | FAWN | 子鹿色(こじかいろ) | #C48490 | |
| LG-2 | CORK | 渋紙色(しぶかみいろ) | #B58150 | |
| LG-3 | SALLOW | 猫柳色(ねこやなぎいろ) | #B3A369 | |
| LG-4 | WAX YELLOW | 蜜蝋色(みつろういろ) | #DECD63 | |
| LG-5 | WILLOW | 柳葉色(やなぎばいろ) | #A2A569 | |
| LG-6 | MIST GREEN | 抹茶色(まっちゃいろ) | #9ABB91 | |
| LG-7 | QUARTZ GREEN | 水晶色(すいしょういろ) | #6FA287 | |
| LG-8 | PORCELAIN BLUE | 呉須色(ごすいろ) | #4F868E | |
| LG-9 | CAMPANULA BLUE | 釣鐘草(つりがねそう) | #8D89A5 | |
| LG-10 | SEA FOG | 鳩羽紫(はとばむらさき) | #86647A |
| F-1 | PLASTIC PINK | プラスチックピンク | #FF3EB5 | |
| F-2 | SUPRISE RED | サプライズレッド | #FF5FA2 | |
| F-3 | EQUATORIAL ORANGE | エクアトリアルオレンジ | #FF8F6C | |
| F-4 | SUNSET ORANGE | サンセットオレンジ | #FFAA4D | |
| F-5 | DAZZLING SUN | ダズリングサン | #FFD635 | |
| F-6 | FIREFLY YELLOW | ファイアフライイエロー | #FCE300 | |
| F-7 | LIGHTNING YELLOW | ライトニングイエロー | #EDE939 | |
| F-8 | NEON GREEN | ネオングリーン | #C5E86C | |
| F-9 | FLASH GREEN | フラッシュグリーン | #97D700 | |
| F-10 | VIGOROUS GREEN | ビガラスグリーン | #44D62C |
| VP-1 | CAMEO PINK | 桜色(さくらいろ) | #F7CED7 | |
| VP-2 | ALMOND BLOSSOM | 一斤染(いっこんぞめ) | #FABBCB | |
| VP-3 | ECRU | 砥粉色(とのこいろ) | #ECC3B2 | |
| VP-4 | EGGSHELL | 鳥の子色(とりのこいろ) | #F1EB9C | |
| VP-5 | ASPARAGUS | アスパラガス | #D4EB8E | |
| VP-6 | OPAL GREEN | 白緑(びゃくろく) | #A2E4B8 | |
| VP-7 | CASCADE | 秘色(ひそく) | #71DBD4 | |
| VP-8 | HORIZON BLUE | 瓶覗(かめのぞき) | #99D6EA | |
| VP-9 | LUPINE | ルピナス | #CBD3EB | |
| VP-10 | VERBENA | 美女桜(びじょざくら) | #A7A4E0 |
| DL-1 | CEDAR WOOD | 雀茶(すずめちゃ) | #9A3324 | |
| DL-2 | CINNAMON | 肉桂色(にっけいいろ) | #A65523 | |
| DL-3 | OIL YELLOW | 菜種油色(なたねゆいろ) | #B9975B | |
| DL-4 | SAGE GREEN | 麹塵(きくじん) | #8A8D4A | |
| DL-5 | VERDIGRIS | 緑青(ろくしょう) | #789D4A | |
| DL-6 | HUMMINGBIRD | 山藍摺(やまあいずり) | #006F62 | |
| DL-7 | JAY BLUE | 熨斗目色(のしめいろ) | #4F758B | |
| DL-8 | HYDRANGEA BLUE | 二藍(ふたあい) | #1B365D | |
| DL-9 | HEATHER | 古代紫(こだいむらさき) | #693C5E | |
| DL-10 | TYRIAN PURPLE | 梅紫(うめむらさき) | #9B3259 |
| EX-1 | SCARLET | 緋色(ひいろ) | #DF4661 | |
| EX-2 | YOLK YELLOW | 卵色(たまごいろ) | #FFA300 | |
| EX-3 | SCOURING RUSH | 木賊色(とくさいろ) | #5C7F71 | |
| EX-4 | DEEP SEA | 深海(しんかい) | #425563 | |
| EX-5 | WILD GRAPE | 山葡萄(やまぶどう) | #615E9B | |
| EX-6 | ANEMONE PINK | アネモネ | #AC4FC6 | |
| EX-7 | PEONY PINK | 牡丹色(ぼたんいろ) | #C5299B | |
| EX-8 | RUSSET BROWN | 小豆色(あずきいろ) | #9C6169 | |
| EX-9 | SEPIA | 烏賊の墨色(いかのすみいろ | #796E65 | |
| EX-10 | SILVER GRAY | 銀鼠(ぎんねず) | #BBBCBC |